-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のものよりも網羅的です（これは多くの例の1つにすぎません）。

ライブデモリンクの後に編集：

障害のあるCSSは次のとおりです。

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

これにより、Firefoxがマウスホバー中に画像をレイアウトする方法が変わります。Firefoxがこの振る舞いの考えを引き起こした唯一のものである理由の手がかりではありません。

Chromeでは、マウスにカーソルを合わせなくても（おそらくa:visitedまたはが原因でa:active）CSSセレクターが一致しているようですが、常に2つの画像が。として表示されblockます。

于 2013-02-06T22:55:54.737 に答える