在 IE11 中使用伪元素 ::before 和 display:table-cell 和 glyphicons 内容不会显示

Question

我现在已经在这上面花了相当多的时间，但无法找到解决方案。我的问题是我想在文本块的内容之前显示一个字形图标，并且带有图标的元素应该填满正文所需的所有高度。这适用于除 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 add/remove 显示：fiddle 上面的 table-cell，您将看到我的问题出在哪里。谁能给我一个解决方案，或者更好的解释一下发生了什么。

Answer 1

将 float:left 添加到 .body 就可以了

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

fiddle

我会保留之前的回答。用户可能会发现它有用：

您可以尝试使用 content: "65" 而不是 "/e005"

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

fiddle

点击here了解更多信息。

Answer 2

Microsoft Connect 网站上有一个关于此问题的活动bug report。在 IE 上，font-family decleration 在带有 display: table-cell; 属性.

的伪元素中被忽略

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

在 IE11 中使用伪元素 ::before 和 display:table-cell 和 glyphicons 内容不会显示

In IE11 using pseudo element ::before and display:table-cell and glyphicons contens wont show up

html

css

internet-explorer-11