使用display：table-cell时，在IE中不显示FontAwesome字形

Question

以下代码在Chrome和FireFox中运行良好，但字形（雪佛龙）确实出现在Internet Explorer中。

删除display：table-cell使其显示。

我想将表格单元显示在那里。

有谁知道为什么？

编辑：

这只会在Windows 8/7上的Internet Explorer 11（及以下版本）中断，所以可能是一个bug？

它适用于MS Edge以及Windows 10计算机上的IE11。

我还改变了下面的例子来说明为什么我需要表格单元格。链接需要在雪佛龙旁边缩进，如下所示：

＆＃13;

＆＃13;

a {
  display: table;
  width: 150px;
  text-decoration: none;
}

a::before {
  padding-right: 20px;
  display: table-cell;
  vertical-align: middle;
  font-family: "FontAwesome";
  content: '\f054';
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<div>
  <a href="#">i am a test link which goes over multiple lines</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

另类想法。

作为表格显示的一部分，可以让图标表现得像表格标题而不是单元格吗？

使用以下内容在IE上显示图标：

div:before {
    font-family: "FontAwesome";
    content: '\f054';
    display: table-caption;
}

Answer 2

首先，你在谈论哪种版本的IE？

尝试将此元标记添加到您的头部：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

如果您使用IE8，请将此脚本标记添加到您的头部：

 <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>

Answer 3

正如Tom Hood和RoToRa所指出的那样，在使用table-cell时，伪元素会忽略css字体指令（例如font-family）。

为了帮助那些绊倒我的人，我已经发布了我的工作。

保持：before伪显示表格单元格，以便它可以进行漂亮的垂直缩进并保持真实元素的高度。

不要在孩子的伪元素中显示任何内容（内容：＆＃39;＆＃39;）。

给它足够的填充物以显示空间。

在父（）上放置一个伪元素。

使用绝对定位显示字形。

呼！

当然，如果你可以侥幸成功，并希望定位最新的浏览器，那就更适合使用弹性盒。

＆＃13;

＆＃13;

div {
  position: relative;
}

div::before {
  font-family: "FontAwesome";
  content: '\f054';
  position: absolute;
  top: 5px;
}

a {
  display: table;
  width: 150px;
  text-decoration: none;
}

a::before {
  padding-right: 30px;
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  content: '';
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<div>
  <a href="#">i am a test link which goes over multiple lines</a>
</div>

＆＃13;

＆＃13;

＆＃13;