1

メニュー項目が水平に配置され、ページの右側に配置されているメニュー (リンクの束) を表示するページで作業しています (stackoverflow ページの上部に既に表示されているものと同様のもの)ログインしている場合）。

HTML は次のようになります。

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">@import url(styles/style.css);</style>
    </head>
    <body >
        <div class="test">
            <!-- float right -->
            <ul class="fr">
                <li><img src="images/1.gif" alt="image 1"/></li>
                <li><img src="images/2.gif" alt="image 2"/></li>
                <li><img src="images/3.gif" alt="image 3"/></li>
            </ul>
        </div>
    </body>
</html>

「テスト」CSS クラスは次のとおりです。

.test ul {list-style:none; }
.test li { display:inline;}

これは、Chrome と Firefox で問題なく表示されます。li アイテムはインラインでページの右側に表示され、すべて 1 行で表示されます。

ただし、IE8 では、これらの要素はページの右側で上下にレンダリングされます。

一度に1行ずつ削除して、これの原因を調べ始めたところ、次のものを削除することに気付きました。

<!DOCTYPE HTML>

その HTML ページから、これは IE8 でも問題なく表示されます。そのページに が存在する場合、何が問題を引き起こしているのか誰かが知っていますか?

もちろん、これは私のページの縮小版であり、HTML5 機能のためにページ内で を使用したいので、それを削除するだけでは解決策とは思えません。

4

1 に答える 1

1

display: inlineそれはIE8のバグだと思います。使用してみてください:

.test li {display: inline-block; }
于 2013-10-14T08:27:10.827 に答える