伪元素在IE9中占用空间

Question

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

下面是完整的源代码示例：

HTML：

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

CSS：

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

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

参见小提琴 in IE9。

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

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

问题似乎是伪: space元素占用了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强制将文本放在一行中(否则会因为空间有限而中断行)

更新小提琴