Question

我现在花了相当多的时间在此，但无法找到解决方案。我的问题是我想在文本块的内容之前显示一个glyphicon，并且带有图标的元素应该填满身体所需的所有高度。这适用于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，您将看到我的问题所在。有人可以给我一个解决方案，甚至更好地解释发生了什么。

Answer 1

Microsoft Connect网站中存在关于此问题的有效bug report。在IE上，在具有font-family属性的伪元素中忽略display: table-cell; decleration。

要解决此问题，您需要设置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了解详情。

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

2 个答案: