0

在使用这样的按钮组时，我遇到了 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 的支持不是一种选择。没关系，它看起来很难看.. :-)

例子

4

2 回答 2

0

这是意料之中的，因为由于 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>
于 2013-03-18T15:15:17.020 回答
-1

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

于 2013-03-18T15:14:24.993 回答