偽元素占用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強制文本在一行中（否則會因為空間有限而導致換行）

更新的小提琴