在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获取更多信息。