Chrome VS Firefox 1個不同的鏈接

大家好我怎樣才能解決與Chrome和Firefox的一個像素差異？我的菜單鏈接似乎在Chrome中正常，但在Firefox中的菜單鏈接1個PX Chrome以外的小Chrome VS Firefox 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>

來源

2012-10-30 learnmore

嗯很奇怪。順便說它不是1px更小，它在Firefox中向下移動1px，高度相同。 –

EDIT 3：添加的圖像，以證明高度是相同的... ...

LARGE VIEW

enter image description here

CLOSE DETAIL：

enter image description here

編輯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; 不改變行高在Chrome中，而它在Firefox變化。

您可以在Chrome中看到36px和37px，或38px和39px之間，但不與37px和38px之間的差異。這就是奇怪的行爲開始的地方...

來源

2012-10-30 13:38:33

我檢查與Firefox和鉻仍然同樣的問題，你可以檢查你的鉻和Firefox的小提琴。在Chrome中，您的小提琴菜單85x28在Firefox 87x29 – learnmore

我編輯了答案，您能檢查描述的行爲嗎？ –

是的，我理解你的意思，但仍然需要一個解決方案:) – learnmore

此代碼是僅針對帶CSS的Firefox

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

使用此代碼來分隔Firefox的css，添加您的代碼而不是h1爲那個像素完美。

來源

2012-10-30 13:15:22 Selvamani

同樣的問題我已經添加菜單CSS屬性而不是H1，但我得到相同的結果1px的差異 – learnmore

Chrome VS Firefox 1個不同的鏈接

回答

相關問題