伪元素占用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中的fiddle。

在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强制文本在一行中（否则会因为空间有限而断行）

updated fiddle