css - 光标出现在带有占位符和 :before attribute 的 contenteditable div 上方

Question

<div contenteditable="true" id="sud"></div>

#sud
{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    position:relative;
}

#sud:empty:before
{
    display:inline;
    content:"hello";
    position:absolute; 
    top:0; left:0;
}

这适用于所有浏览器，但对于 IE10，光标出现在 div 上方。有人可以为此提出解决方案吗？

JSFiddle:http://jsfiddle.net/KX6BY/8/

Answer 1

DEMO

此解决方案的缺点/优点:此解决方案将隐藏聚焦元素的文本，这是一个缺点，但或多或​​少是一件好事，因为许多人使用 javascript 来隐藏输入中的占位符文本领域重点。

详细信息:

1) 内容不应该是 css 的一部分，因此我将内容从 :before 移动到 html 中的 data-initial-content 属性。

2) .sud:empty:before 仅当 div 为空时将初始内容放在 before 中，当用户聚焦 div 时，我将 :before 设置为 display:none; 使用这个选择器 .sud:focus:before。

3) 在此解决方案中不需要 position: absolute。

4) 还添加了 overflow-y:auto 和一些 padding 以提高可用性和视觉效果。