html - 在 IE11 中使用 pseudo element::before 和 display:table-cell 和 glyphicons 内容不会显示

Question

我现在已经在这上面花了相当多的时间，但无法找到解决方案。我的问题是我想在文本 block 的内容之前显示一个字形图标，并且带有图标的元素应该填满正文所需的所有高度。这适用于除 IE 之外的所有浏览器版本。我已经把它归结为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%;
}

如果您使用 IE11 在上面的 fiddle 上添加/删除 display: table-cell，您将看到我的问题出在哪里。有人可以给我一个解决方案，或者更好的解释发生了什么。

Answer 1

有一个活跃的bug report Microsoft Connect 网站上有关此问题的信息。在 IE 上，font-family decleration 在具有 display: table-cell; 属性的伪元素中被忽略。

要解决此问题，您需要设置 display: inline-block;。