Bootstrap + Font Awesome + IE7 =带图标的按钮没有标题

Question

使用像这样的按钮组时，我遇到了Bootstrap，Fontawesome和IE7的问题：

<div class="btn-group">
    <a href="some-url.html" class="btn icon-circle-arrow-left"> Back</a>
    <a href="some-other-url.html" class="btn icon-edit"> Edit</a>
</div>

我已将CSS文件包含在文档的HEAD（HTML5）中：

<link href="/bootstrap/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/fontawesome/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/fontawesome/css/font-awesome-ie7.min.css" media="screen" rel="stylesheet" type="text/css" />

它在大多数现代浏览器中都显示出预期效果。但在IE7中，按钮上的标题文本消失了。请参阅随附的屏幕截图（WinXP上的IE7，WinXP上的IE8，OS X上的Safari）。在IE8上使用F12开发人员工具并在兼容模式下运行时，我看到标签中的文本节点只包含一个正方形（开发工具无法显示的图标）;节点中的文本消失了。手动更改它会删除图标并显示文本。

有没有人有任何建议我如何解决这个问题？不幸的是，放弃对IE7的支持不是一个选择。虽然它看起来很难看但是很好..： - ）

Answer 1

由于IE7缺乏:before / :after支持，因此他们正在使用CSS Expression生成您需要的内容。

https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome-ie7.min.css

.icon-glass{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}

在这种情况下你必须使用一个空元素：

<a href="some-url.html"><span class="btn icon-circle-arrow-left"></span> Back</a>

Answer 2

您是否尝试在IE 6-8中包含HTML5支持html5shiv？ https://code.google.com/p/html5shiv/