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

【问题标题】：In IE11 using pseudo element ::before and display:table-cell and glyphicons contens wont show up在 IE11 中使用伪元素 ::before 和 display:table-cell 和 glyphicons 内容不会显示
【发布时间】：2015-06-05 10:32:58
【问题描述】：

我现在在这方面花了相当多的时间，但无法找到解决方案。我的问题是我想在文本块的内容之前显示一个字形图标，并且带有图标的元素应该填满正文需要的所有高度。这适用于除 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 在上面的小提琴中添加/删除 display: table-cell，您将看到我的问题出在哪里。有人可以给我一个解决方案，或者更好地解释发生了什么。

【问题讨论】：

标签： html css internet-explorer-11

【解决方案1】：

将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了解更多信息。

【讨论】：

感谢您的努力。如果我想要一颗心，那工作。我有自己的字体设置，glyphicon 只是一个示例，它们被下载是因为如果我删除显示，图标就会出现：table.cell，即使在小提琴中。
@Sammy 您将float: left; 添加到生成的:before 元素，而不是.body 元素。不幸的是，这将生成元素的高度与其内容的高度联系起来，而不是 .body 元素的高度。我认为这不是 OP 想要的。

【解决方案2】：

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

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

【讨论】：

或者你可以声明一个float 属性，就像@Sammy 提到的那样。声明一个值不是none 的float 属性会将display: table-cell 转换为display: block;（请参阅here）。所以，float 没有任何技巧，仍然是display 属性会产生变化。
我很确定浮动生成的内容会有效地抵消其display: table-cell; 属性，这意味着它的高度将不再与 .body 元素的高度匹配。