3

みなさん、こんにちは。ChromeとFirefoxで1ピクセルの違いを修正するにはどうすればよいですか？私のメニューリンクはChromeで正しく表示されますが、FirefoxではメニューリンクがChromeより1ピクセル小さくなっています

CSSは次のとおりです。

ul#menu {
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    margin-top:-3px;
    margin-left:7px;
    float:left;
    height:34px;
    display: inline-block; 
}

ul#menu li {
    text-align: center;
    display: inline;
    list-style: none;
    font-family: 'Museo300Regular';
    font-size:15px;
    font-style:normal;
    line-height: 1;
}

ul#menu li a {
    background-image:url(../../images2/images/menu_bg_normal.jpg); 
    background-repeat: repeat;
    padding:5px 23px 6px 23px; /*üst sol alt sağ */
    font-weight: normal;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #FEFEFF;
    cursor:pointer; 
}

.deneme 
{
    width:964px;
    margin-left:auto;
    margin-right:auto;
}

これがHTMLパートです：

<div class="deneme">
    <ul id="menu">         
     <li><a>Başkan</a></li>
     <li><a>Meclis</a></li>
     <li><a>Enc&#252;men</a></li>
     <li><a>Kurumsal</a></li>
     <li><a>Maltepe</a></li>
     <li><a>Etkinlikler</a></li>
     <li><a>İhaleler</a></li>
     <li><a>E-Belediye</a></li>
     <li><a id="link">Linkler</a></li>
    </ul>
</div>
4

2 に答える 2

2

編集3：高さが同じであることを証明するために画像を追加しました...

拡大図

ここに画像の説明を入力してください

詳細を閉じる：

ここに画像の説明を入力してください

編集2：これは最初のコードと同じであり、ChromeとFirefoxの両方で同じようにレンダリングされます：http：//jsfiddle.net/qavB6/4/

追加した

ul#menu li {
/*...*/
display: inline-block;
margin-top: 4px;
}

とline-height: 35px;にul#menu li a {。

楽しみ...

編集：

行の高さを特定の値に設定すると、FirefoxとChromeで同じようにレンダリングされます。

http://jsfiddle.net/qavB6/3/

理由はわかりませんが、深く掘り下げline-height: 38px;てline-height: 37px; みると、Firefoxでは行の高さが変更されるのに対し、Chromeでは行の高さが変更されるか変更されないことがわかりました。

36pxChromeの違いは、との37px間、またはとの間で確認できますが、との間では確認38pxできませ39pxん。そこから奇妙な振る舞いが始まります...37px38px

于 2012-10-30T13:38:33.350 に答える
0

このコードは、CSS を使用する Firefox のみをターゲットにしています

<style type="text/css">
@-moz-document url-prefix() {
h1 {
    color: red;
}
}
</style>

このコードを使用して、Firefox の css を分離します。そのピクセルの完全性のために、h1 の代わりにコードを追加します。

于 2012-10-30T13:15:22.867 に答える