html - Internet Explorer CSS 内容属性后出现光标

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

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

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

希望这对您有所帮助!