Html 跨浏览器可编辑范围

是可编辑跨度元素的一个简单示例

可通过单击lt编辑跨度元素-显示输入

<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>

对于IE 10和Opera：

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

对于Firefox：

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

---

我可以制作一个在任何浏览器中都能正常工作的通用css吗？

contenteditable属性应该适合您。它起作用了

---

谢谢您的回复！当跨距宽度结束时，我如何才能在不去新行的情况下表现得像一个输入？应该能够添加

空白：nowrap到跨度。无论如何，它都会打破跨度宽度。谢谢。我想用你的解决方案，但你的解决方案似乎更简单。这是迄今为止最好的解决方案！本地支持。将使用与Angular不同的东西绑定到控制器变量。
input {
    margin-left: -4px;
    margin-top: -2px;
}