伪元素占用IE9中的空间

Question

我有一个div，想要表现得像文本输入字段。

这是完整的源代码示例：

HTML：

<div contenteditable='true'></div>

CSS：

div:empty:before {
    content: 'Type here...';
    color: #ccc;
}

div{
    padding: 4px;
    border: 1px solid #ccc;
}

参见IE9中的小提琴 。

在IE9中，问题在于键盘插入符显示在末尾。

在Chrome中，插入符号是开头，这是正确的。

似乎问题在于伪：before元素正在IE9中占用空间。 如何使它像Chrome一样占用空间（就像占位符一样）？

Answer 1

要使其在IE中起作用：

div:empty:before {
    content: 'Type here...';
    color: #ccc;
    display: inline-block;
    width: 0;
    white-space: nowrap;
}

display: inline-block可以设置宽度。

width: 0确保元素不占用空间。

white-space: nowrap强制文本在一行中（否则会因为空间有限而导致换行）

更新的小提琴