0

私はこのHTMLを使用しているHTML5ナビゲーションに取り組んでいます:

<menu>
    <li><a href="#">Test</a></li>
    <li><a href="#" class=clip>Test</a></li>
    <li><a href="#" class=clip>Test</a></li>
    <li><a href="#" class=clip>Test</a></li>
</menu>

これは、この JSFiddle の例で見ることができます。

すべてのLI要素が として表示されinline-blockます。特定inline-blockのline-height.

これは、上記の HTML の例では LESS です

menu {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #eee;

    li {
        margin: 0;
        padding: 0;
        line-height: 50px;
        display: inline-block;

        a {
            display: inline-block; // <--- CULPRIT
            border: 1px solid #ccc;

            &.clip {
                width: 1em;
                overflow: hidden;
            }
        }
    }
}

問題

上記のコードは Chrome では問題なく表示されますが、Firefox と Internet Explorer では表示されません (私が使用しているのは 11 です)。FF と IE はどちらも最初LIに下にシフトして表示されます。

リンクを削除するinline-blockと、最初の子のシフトは消えますが、リンクには適切なものがなくline-height、現在表示されているようにリンクの幅を設定することもできませんinline。

質問

私は何を間違えましたか、このクロスブラウザーの方法をどのように解決する必要がありますか。

4

5 に答える 5

2

インライン ブロックは、現在のベース ラインに配置されます。メニューには独自のものがあり、リスはそこに並んでいます。追加

menu li {
    vertical-align: top;
}

浮遊する上部マージンはなくなりました。

于 2013-10-01T11:33:53.073 に答える
1

背後にある理由についてはわかりませんが、さまざまなブラウザーのレンダリング方法に関係していますinline-block。

解決策 1

あなたのli要素に変更display: inline-blockしdisplay: blockて使用することができますfloat: left

menu li {
    display: block;
    float: left;
    line-height: 50px;
    margin: 0;
    padding: 0;
}

解決策 2

キープdisplay: inline-blockですが追加ですvertical-align: top

menu li {
    display: inline-block;
    vertical-align: top;
    line-height: 50px;
    margin: 0;
    padding: 0;
}
于 2013-10-01T11:20:33.530 に答える
0

この例を参照してください: http://www.overpie.com/css/articles/css-vertical-fly-out-menu

長いテキストがあると問題が発生するため、line-height を使用しないことをお勧めします。

于 2013-10-01T11:40:32.957 に答える
0

display: block; float: left;li // または inline-block 内のタグに使用しても問題ありません。ここで重要なのは、左にフロートすることです。

デモ

于 2013-10-01T11:18:18.573 に答える
0

これに従ってcssを変更します 

     menu {
        margin: 0;
        padding: 0;
        list-style: none;
        background-color: #eee;
    }

    li {
        margin: 0;
        padding: 0;
        line-height: 50px;
        display:inline;
    }

    a {
        display: inline;
        /*CULPRIT border: 1px solid #ccc;*/
    }

        &.clip {
            width: 1em;
            overflow: hidden;
        }

フィドルデモ

于 2013-10-01T11:28:54.227 に答える