2

css を使用してナビゲーション リストを設計しました。以下は私のコードです

ul#mainnavigation li a {
    font: 14px/20px 'Open Sans', Open Sans, Helvetica, Arial, sans-serif;
    position:relative;
    font-weight:600;
    color:#686868;
    margin:0;
    padding:0 19.7px;
    height:50px;
    line-height:50px;
    display:inline-block;
    -webkit-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
    -moz-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
    -o-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
    transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
    z-index:100;
}

私が抱えている問題は、Firefox では完全に動作することですが、Chrome では最後のナビゲーション要素が下に消えてしまいます。

Firefoxpadding:0 25.7px;では正しい結果が得られます

クロムpadding: 0 26.5px;では正しい結果が得られます

パディングが両方のブラウザで正しく機能することを確認するにはどうすればよいですか?

注: doctype を次のように定義しました。<!DOCTYPE html>

4

1 に答える 1

0

お気づきのように、ブラウザーが異なれば、同じ要素に対してわずかに異なるピクセル サイズがレンダリングされることがよくあります。これは多くの場合、フォント サイズとブラウザーがフォントをスケーリングする方法が原因ですが、さまざまな理由が考えられます。

私の提案は次のとおりです。

1) ナビゲーション メニューの高さを 50 ピクセルにする必要がある場合は、内部の要素を拡大縮小して、ブラウザーが問題を引き起こす余地を少し残します。または、次のようにします。

2) メニューでハードコードされた 50 ピクセルの高さを削除して、その要素に合わせて自動的にスケーリングすることもできます。メニュー内の何かがフローティングされている場合、メニュー コンテナーの「height」属性を削除し、「overflow:hidden;」を追加します。属性を CSS に追加すると、メニューがその中のすべての高さまで拡張されます。

于 2013-02-04T15:40:39.727 に答える