0

私のコードは次のようになります: http://jsfiddle.net/wJ6V5/

CSS

.u_menu {
    background:#000;
    height:40px;
    width:100%;
    background-image: -moz-linear-gradient(top, #97c840, #8ab63a);
    background-image: -webkit-linear-gradient(top, #97c840, #8ab63a);
    background-image: -o-linear-gradient(top, #97c840, #8ab63a);
}
ul.u_nav {
    float:right;
    margin-right:250px;
    margin-top:7px;
}
ul.u_nav li {
    font-size:14px;
    background:#fff;
    float:left;
    margin-right:15px;
    padding:3px 10px;
    border-bottom:solid 1px #a6cd62;
    box-shadow:inset 0 1px 1px 0 #666;
    background-image: -moz-linear-gradient(top, #80ae2e, #8ebf38);
    background-image: -webkit-linear-gradient(top, #80ae2e, #8ebf38);
    background-image: -o-linear-gradient(top, #80ae2e, #8ebf38);
}

HTML

<div class="u_menu">
    <ul class="u_nav">
        <li>Test</li>
        <li>Teest</li>
    </ul>
</div>

Firefoxのページでは（私が望むように）見栄えがしますが、ChromeとOperaではli要素がメインdivの真ん中にありません。それらは上の境界線に 1px 近づきます。

Chrome と Opera では境界線の高さが li の高さに追加されるため、これらのブラウザでは li 要素が FF よりも 1 ピクセル高くなるためだと思いますが、これが理由かどうかはわかりません。

それを修正する方法はありますか？Firefox とまったく同じように、Chrome と Opera で効果を発揮したいと考えています。または、 u_menu divの途中で li 要素を設定する他の方法はありますか?

4

1 に答える 1

0

問題はフォントサイズにあるようです。11px に縮小すると、Firefox と Chrome の両方で同じ高さが表示されます。その理由は本当にわかりませんが、たとえば font-size: 1em は、現在のサイズとほぼ同じで、両方のブラウザーで同じ結果が得られます。

于 2012-11-13T17:16:13.827 に答える