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

【问题标题】：Bootstrap + Fontawesome + IE7 = no caption on buttons with iconBootstrap + Font Awesome + IE7 = 带图标的按钮上没有标题
【发布时间】：2013-03-06 23:40:09
【问题描述】：

在使用这样的按钮组时，我遇到了 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开发者工具并在兼容模式下运行时，我看到标签中的text-node只包含一个正方形（开发工具无法显示的图标）；节点中的文本消失了。手动更改它会去掉图标并显示文本。

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

【问题讨论】：

标签： css twitter-bootstrap internet-explorer-7 font-awesome

【解决方案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 = '&#xf000;')}

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

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

【讨论】：

非常感谢，帮了大忙！

【解决方案2】：

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

【讨论】：