在IE11中使用僞元素:: before和display：table-cell和glyphicons contens不會出現

Question

我已經花了相當不錯的時間在這個上，但無法找到解決方案。我的問題是，我想在文本塊的內容之前顯示一個圖形，並且該圖標所包含的元素應該填充身體所需的所有高度。這適用於除IE以外的所有瀏覽器版本。表細胞上面使用IE11，你會看到我的問題是小提琴：如果添加/刪除顯示我已經在這個fiddle

<div class="block"> 
    <div class="body">BODY</div> 
</div> 

.body::before { 
    background: blue; 
    content: "\e005"; 
    font-family: "Glyphicons Halflings"; 
    display: table-cell; 
    width:30%; 
} 

.body { 
    background-color: green; 
    display: table; 
    width: 25%; 
} 

煮下來。有人可以給我一個解決方案，甚至更好，解釋發生了什麼。

Answer 1

在Microsoft Connect網站上有關於此問題的活動bug report。在IE上，font-family decleration在具有display: table-cell;屬性的僞元素中被忽略。

要解決此問題，您需要設置display: inline-block;。

Answer 2

添加float:left到.body的伎倆

.body:before { 
    background: blue; 
    content: "\e005"; 
    font-family: "Glyphicons Halflings"; 
    display: table-cell; 
    width:30%; 
    float:left; 
} 

fiddle

---

我將在這裏保持這個以前的答案。用戶可能會發現它有用：

您可以嘗試使用的content: "\2665"代替"/e005"

.body:before { 
    background: blue; 
    content: "\2665"; 
    display: table-cell; 
    width:30%; 
} 

fiddle

點擊here獲取更多信息。