Here是可编辑跨度元素的一个简单示例。
可以通过单击 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>
我希望 input 中的文本与 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 吗?
最佳答案
contenteditable
属性应该适合你。有效 all the way back to ie5.5 .
<span contenteditable></span>
关于html - 跨浏览器可编辑范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19319229/