css - 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 文件包含在文档 (HTML5) 的 HEAD 中，如下所示:

<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开发者工具，在兼容模式下运行，看到tag中的text-node只有一个方 block (开发者工具无法显示的图标)；节点中的文本消失了。手动更改它会删除图标并显示文本。

有没有人对我如何解决这个问题有任何建议？不幸的是，放弃对 IE7 的支持不是一种选择。虽然它看起来很丑也没关系..:-)

Answer 1

这是意料之中的，因为由于 IE7 缺少 :before/:after 支持，他们使用 CSS 表达式生成您需要的内容。

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>