-1

我不知道原因，但我在 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中的其他东西导致了这个问题。

4

1 回答 1

2

如评论中所述，您的代码在最新版本的 Firefox 中运行良好。但是，您可以考虑使用 CSS 重置，就像这样简单：

* {
    margin: 0;
    padding: 0;
}

或者更详尽如K. Meyer 的（它只是众多示例之一）。

现场演示链接后编辑：

有缺陷的 CSS 是：

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

这会改变 Firefox 在鼠标悬停期间布局图像的方式。不知道为什么 Firefox 是唯一触发这种行为的想法。

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

于 2013-02-06T22:55:54.737 回答