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

Question

下面的代码在 Chrome 和 FireFox 中运行良好，但字形（V 形）确实出现在 Internet Explorer 中。

移除 display:table-cell 使其出现。

我想在其中保留表格单元格的显示。

有人知道为什么吗？

编辑：

这仅在 Windows 8 / 7 上的 Internet Explorer 11（及更低版本）上中断，所以这可能是一个错误？

它适用于 MS Edge 和 Windows 10 机器上的 IE11。

我还更改了下面的示例以说明为什么我需要表格单元格。链接需要在 V 形旁边缩进，如下所示：

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

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

<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>

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 伪保留为显示表格单元格，这样它就可以很好地垂直缩进并保持真实元素的高度。

不要在子元素（the）的伪元素中显示任何内容（内容：''）。

给它足够的填充空间来展示一些东西。

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

使用绝对定位显示字形。

呼！

当然，如果您可以摆脱它并希望针对最新的浏览器 - 弹性盒子会更可取。

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: '';
}

<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>