悬停时图像位置发生变化（仅在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上）

回答

相关问题