0

ホバーしたときに画像を変更する background-position メソッドを使用しています。これは、FF、Chrome、および Safari では正常に機能しますが、IE8 では機能しません。背景画像は、アルファ透明度を含む .png です。コードを W3C バリデーターで実行しましたが、有効なので、互換モードに入る必要はありません。

関連する HTML コードのスニペットは次のとおりです。

<div id="main-nav">
<div id="texas">
  <a href="texas.html"><span>texas</span></a>
  <h2>texas</h2>
</div>
<div id="washington">
  <a href="washington.html"><span>washington</span></a> 
  <h2>washington</h2>
</div>
</div>

そして関連するcss：

#main-nav {
  width: 844px;
  height: 400px;
  margin: 40px auto; 
  position: relative;
}

#texas, #washington { 
  position: absolute; 
  height: 500px; 
  width: 196px;
}

#texas a {
  background-image: url("pics/texas.png"); 
}

#washington a {
  background-image: url("pics/washington.png");
}

#texas a, #washington a { 
  height: 400px; 
  width: 196px;
  display: block;
}

#texas a:hover, #washington a:hover { 
  background-position: 196 0; 
}

ヘルプ？

4

3 に答える 3

1

background-positionIE8 でのみ、ホバー時に変更されたCSS ロールオーバーが機能しないという同様の問題がありました。それらは非常に散発的でした - 時々 1 つがスイッチアウトしますが、別のものが最終的にトリガーされるまで、しばらくホバー状態のままになります。

filter: alpha(opacity=100);要素の親要素の css からIE 固有の透明度フィルターを削除すると、問題が解決されることがわかりました。

于 2012-07-18T19:44:17.887 に答える