懸停時圖像位置發生變化（僅在Firefox上）

-1

我不知道原因，但我在Firefox上面臨一些問題。懸停時圖像位置發生變化（僅在Firefox上）

enter image description here

標誌768,16不動懸停......但只有在Firefox的標誌改變位置。

enter image description here

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
</head> 
<body> 
<header> 
    <code> 
    <span>E</span>xample 
    </code> 
<div id="language"> 
    <a href="/en/home"><img alt="England" src="/assets/england-5be6776a259abf9711f460282fb6867b.png" /></a> 
    <a href="/br/home"><img alt="Brazil" src="/assets/brazil-e70ce4232fd8b49307a857cb63f6625a.png" /></a> 
</div> 
</header> 
</body> 
</html>

CSS

* {margin: 0; padding: 0;} 

body { 
    background: #f2f2f2; 
    font: Verdana,Arial,Helvetica,Sans-Serif; 
} 

header { 
    width: 100%; 
    height: 80px; 
    background: #333333; 
    color: #f5f5f5; 
    font-size: 2em; 
} 

header span { 
    font-size: 2.5em; 
} 

code { 
float: left; 
} 

#language { 
    float: right; 
} 

#language a img{ 
    height: 25px; 
}

我嘗試添加以下到我的CSS沒有成功。

#language a img:hover { 
    text-decoration: none; 
    border: none; 
}

編輯

火狐18.0.2，Mac OS X的五10.7.5

感謝@KatieK我設法在這裏模擬的問題：http://jsfiddle.net/sqCuL/2/。我認爲我的CSS中有其他東西導致了這個問題。

來源

2013-02-06 gabrielhilal

在您發佈的代碼中沒有任何內容會導致該問題。這個演示：當我懸停鏈接時，http://jsfiddle.net/KatieK/sqCuL/顯示沒有任何移動。你能提供證明問題的東西嗎？ – KatieK

您正在使用哪個Firefox版本（以及哪個操作系統）？ –

是的，你一定不會向我們展示一些重要的東西 – dezman

您的代碼在最新版本的Firefox中運行得非常好，如註釋中所述。但是你可以考慮使用一個CSS復位，是化繁爲簡：

* { 
    margin: 0; 
    padding: 0; 
}

或者作爲K. Meyer's one更詳盡的（這只是one of many exemples）。經過現場演示環節

編輯：

有故障的CSS是：

nav li a, a:hover, a:visited, a:active, #current { display: block; }

哪些改變火狐鼠標懸停在佈局過程中的圖像的方式。不明白爲什麼Firefox是觸發這種行爲思想的唯一原因。

似乎在Chrome瀏覽器中，即使沒有鼠標懸停（可能是因爲a:visited或a:active），CSS選擇器也會一直顯示爲block。

來源

2013-02-06 22:55:54

CSS重置是在我的CSS第一行 – gabrielhilal

錯過了它。我的壞，對不起。 –

我將行改爲'nav li a，nav li a：hover，nav li a：visited，nav li a：active，#current {'並且問題解決了。非常感謝。 – gabrielhilal

懸停時圖像位置發生變化（僅在Firefox上）

回答

相關問題