光标出现在 Internet Explorer 中 CSS 的 content 属性之后

Question

请查看下面的 jsfiddle 示例

http://jsfiddle.net/KX6BY/1/

<div contenteditable="true" id="sud"></div>
#sud
{
width: 100px;
height: 100px;
top: 50px;
left: 50px;
border: 1px solid black;
}

#sud:empty:before
{
content:"hello"
}

在 Chrome、Firefox、Safari 等所有主要浏览器中，输入字段光标的焦点出现在开头（在内容顶部）但在 Internet Explorer 中，光标出现在内容之后。有什么解决方法吗？？

Answer 1

工作解决方案：JSFIDDLE

通过将position:absolute 指定给:before 伪类并赋予top: 值等于为文本计算的行高，您可以在所有浏览器中拥有统一的功能。

#sud:empty:before
{
content:"hello";
position:absolute;
top:8px;
}

希望这会有所帮助！