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>

ドキュメント（HTML5）のHEADにCSSファイルを次のように含めました。

<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 でのサポートを中止することはできません。醜く見えても大丈夫です.. :-)

例

4

2 に答える 2

0

:beforeIE7には/: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にHTML5サポート用のhtml5shivを含めてみましたか？https://code.google.com/p/html5shiv/

于 2013-03-18T15:14:24.993 に答える