光标在Internet Explorer中的伪类之前未正确显示

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中，光标出现在内容之后。有没有解决方法？即使定位绝对/固定，我也面临着问题。