Html 在IE11中，使用pseudo-element:：before和display:table单元格和glyph图标内容不会显示

我在这件事上花了很长时间，但还没有找到解决办法。我的问题是，我想在文本块的内容之前显示一个glyphicon，而带有该图标的元素应该填满主体所需的所有高度。这在除IE之外的所有浏览器版本中都有效。我已经在本文中对此进行了详细说明

身体
.身体：：以前{
背景：蓝色；
内容：“\e005”；
字体系列：“半人字形”；
显示：表格单元格；
宽度：30%；
}
.身体{
背景颜色：绿色；
显示：表格；
宽度：25%；
}

---

如果您使用IE11添加/删除上面小提琴上的display:table单元格，您将看到我的问题所在。有人能给我一个解决方案，或者更好的解释一下发生了什么。

将

float:left

添加到

中。body

起到了作用

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

---

我将保留前面的答案。用户可能会发现它很有用：

您可以尝试使用

内容：“\2665”

而不是

“/e005”

点击查看更多信息

在Microsoft Connect网站上有一个关于此问题的活跃消息。在IE上，

font-family

decelleration在带有

display:table cell的伪元素中被忽略属性

要解决此问题，需要设置
display:inline块
感谢您的努力。如果我想要一颗心，那就行了。我有自己的字体设置，glyphicon只是一个例子，它们是下载的，因为如果我删除display:table.cell，即使在小提琴中，图标也会显示出来。@Sammy您正在添加
float:left
到生成的
：在
元素之前，而不是
.body
元素。不幸的是，这将生成元素的高度与其内容的高度相联系，而不是.body元素的高度。我不认为这是OP想要的。或者您可以声明@Sammy提到的
float
属性。声明值不是
none
的
float
属性将
display:table单元格
转换为
display:block（请参阅）。因此，
float
，仍然是创建更改的
display
属性，没有任何技巧.body:before {
    background: blue;
    content: "\e005";
    font-family: "Glyphicons Halflings";
    display: table-cell;
    width:30%;
    float:left;
}

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