悬停时图像位置发生变化（仅在 Firefox 上）答案

【问题标题】：Image position is changing on hover (only on Firefox)悬停时图像位置发生变化（仅在 Firefox 上）
【发布时间】：2013-02-07 07:15:12
【问题描述】：

我不知道原因，但我在 Firefox 上遇到了一些问题。

旗帜不应该在悬停时移动......但只有在 Firefox 上，旗帜才会改变位置。

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;
}

编辑

Firefox 18.0.2、Mac OS X V. 10.7.5

感谢@KatieK，我设法在这里模拟了这个问题：http://jsfiddle.net/sqCuL/2/。我认为我的 css 中的其他东西导致了问题。

【问题讨论】：

您发布的代码中没有任何内容会导致这种情况。这个演示：jsfiddle.net/KatieK/sqCuL 在我悬停链接时显示没有移动。你能提供一些证明问题的东西吗？
您使用的是哪个 Firefox 版本（以及哪个操作系统）？
是的，你不能向我们展示一些重要的东西
我已经编辑了问题。
您网站的链接已损坏

标签： css html firefox position

【解决方案1】：

如 cmets 中所述，您的代码在最新版本的 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 在鼠标悬停期间布局图像的方式。不知道为什么 Firefox 是唯一触发这种行为的想法。

似乎在 Chrome 中，即使没有鼠标悬停（可能是因为a:visited 或a:active），CSS 选择器也会匹配，始终将两个图像显示为block。

【讨论】：

css 重置在我的 css 的第一行
我将线路更改为nav li a, nav li a:hover, nav li a:visited, nav li a:active, #current { 并解决了问题。非常感谢。