IE9伪元素占用space

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 中占用了 space。我怎样才能让它像 Chrome 那样不占用 space （表现得像一个占位符）？

Answer 1

要让它在 IE 中工作：

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

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

width: 0 确保元素不占用 space.

white-space: nowrap 强制文本在一行中（否则由于 space 的限制会换行）

Pseudo element takes up space in IE9