Chrome位置元素與Firefox不同

我在頁面頂部有這些按鈕，問題是Chrome瀏覽器顯示的這些按鈕的右邊有80px。我究竟做錯了什麼？Chrome位置元素與Firefox不同

這是一個按鈕的風格：

#engleza1{ 
position: relative; 
top:0px; 
left: 788px; 
width: 51px; 
height:42px; 
} 
#engleza1:hover{ 
position: relative; 
top:0px; 
left: 788px; 
width: 51px; 
height:42px; 
background:url(../images/engleza.png) no-repeat; 
cursor: pointer; 
}

，這是它們的包裝風格：

#wrap{ 
width:100%; 
height: 1950px; 
text-align: center; 
margin:0 auto; 
overflow: hidden; 
background:url(../ong.png) center no-repeat; 
}

HTML：

<div id="wrap"> 
<div id="engleza1"> 
//nothing here 
</div> 
... 
</div>

來源

2012-09-18 Claudiu Creanga

嗨，現在它的罰款http://jsfiddle.net/gPGTf/1/ –

是的，我看到上的jsfiddle沒關係。所以我的代碼有問題，這使得這些div的行爲就像這樣，不是嗎？ –

好的，我想我知道問題可能是什麼。 Chrome正在顯示背景圖片：ong.png更大。所以包裝div必須更大，這就是爲什麼這些div放錯了位置。我該如何解決這個問題？ –

你好你的一些代碼重複所以將它移除並歸還此

#wrap{ 
height: 1950px; 
text-align: center; 
margin:0 auto; 
overflow: hidden; 
background:red; 
} 
#engleza1{ 
position: relative; 
top:0px; 
    left:788px; 
width: 51px; 
height:42px; 
    background:yellow; 
} 
#engleza1:hover{ 
background:green; 
cursor: pointer; 
}

爲演示變化根據您的佈局

live demo

來源

2012-09-18 08:12:46

是的，但我認爲最好的方法是使用一些精靈並像那樣解決它。謝謝！ –

Chrome位置元素與Firefox不同

回答

相關問題