2

問題は非常に単純です。ここに私のCSSがあります:

.fixed-body {
    position: absolute;
}

そして私のHTML：

<div class="fixed-body">
    <ul class="breadcrumb">
        <li class="active">Name with spaces<span class="divider">/</span></li>
        <li><a href="#">Home</a><span class="divider">/</span></li>
        <li><a href="#">Library</a></li>
    </ul>
</div>

Internet Explorer 8 を除くすべてのブラウザーですべてが正常に表示されます。パンくずリストは次のようにレンダリングされます。

Bootstrap のブレッドクラムの IE8 レンダリング

この jsfiddleで自分で確認できます。jsfiddle は IE8 で適切にレンダリングされないため、これは結果のフレームにすぎません。フィドル全体がこのアドレスにあります(URL に「表示」部分がない同じアドレスです)。

正しくレンダリングされない理由は 2 つあります。

  1. position: absoluteのCSS ディレクティブ.fixed-body
  2. ブレッドクラムの最初のセクションのスペースName with spaces

最初のセクションにスペースが含まれていない場合、またはposition親ノードの が に設定されていない場合absolute、Internet Explorer 8 はブレッドクラムを適切にレンダリングします。

ブレッドクラムを別のものにラップしてdivリセットしよpositionうとしましたstaticが、役に立ちません。そのように表示される Internet Explorer 8 の特定の制限はありますか? そして最も興味深いのは、この問題を修正または回避する方法はありますか?

編集（私の応答からコピー）：

偶然に適切な修正が見つかりました。inline-blockブレッドクラムでinlineforをオーバーライドするとli、副次的な問題なしに目的の効果が得られます (AFAIK):

.breadcrumb > li {
    display: inline;
}

my fiddleの新しいバージョンも参照するか、IE8 でショー フレームだけを開きます。

4

2 に答える 2

2

これは「ブレッドクラム」の幅のためです...

IE8 でこれを確認してください: http://fiddle.jshell.net/azm53/12/show

ブレッドクラムの幅を 400px に変更しましたが、問題ありません。

<div class="fixed-body">
    <ul class="breadcrumb">
        <li class="active">Name with spaces<span class="divider">/</span>

        </li>
        <li><a href="#">Home</a><span class="divider">/</span>

        </li>
        <li><a href="#">Library</a>
        </li>
    </ul>
</div>

そしてCSS

.fixed-body {
    position: absolute;
}
.breadcrumb {
    width: 400px;
}
于 2013-07-10T16:05:42.337 に答える