跨浏览器可编辑范围

Question

Here 是一个可编辑 span 元素的简单示例。

可以通过点击 lt 来编辑 Span 元素 - 出现输入。

<span>Hello</span>
<input type="text" style="display:none;" value=""/>
<style>
    span, input {    
        font-family: arial, sans-serif;
        font-size: 14px;
    }
    span {
        cursor: pointer;
    }
</style>
<script>
    $(function() {
        $("span").click(function() {
            $(this).hide();
            $("input").val($(this).text()).show();
        });
        $("input").keypress(function(e) {
            if (e.which == 13) {
                $(this).hide();
                $("span").text($(this).val()).show();
            }
        });
    });
</script>

我希望输入中的文本与 span 中的文本处于精确位置。

所以我要添加边距：

对于 Chrome：

input {
    margin-left: -2px;
    margin-top: -2px;
}

对于 IE 10 和 Opera：

input {
    margin-left: -3px;
    margin-top: -2px;
}

对于火狐：

input {
    margin-left: -4px;
    margin-top: -2px;
}

我可以制作一个通用的 css，它可以在任何浏览器中运行而无需任何特殊技巧吗？

Answer 1

contenteditable 属性应该适合您。它可以工作all the way back to ie5.5。

<span contenteditable></span>

http://jsfiddle.net/CCJMe/