擬似クラスにスタイル指定がないと擬似クラスの子孫要素への指定が効かない

症状

擬似クラスの子孫要素に何らかのスタイルを指定するときは、擬似クラス自体にもスタイルを指定しなければ無視されてしまう。

例示

スタイルシート内の記述：

a:hover span {
  background: #00ffff;
  color: #800000;
  font-weight: bold;
}

HTML文書内の記述：

<p><a href="./">WinIE<span>目次</span></a></p>

a:hover自体には一切スタイルを指定していません。リンクにマウスポインタ等を乗せると、「目次」の部分だけ、背景色・前景色・文字太さが変化するはずです。

スクリーンショット

補足

a:hover自体にもスタイルを指定するとこのバグを回避できます。背景を指定するのが効果的なようです。ブロック内に空白文字以外の文字を置くだけで回避することができる場合があります。ただし、スタイルの組み合わせによっては回避できないこともあるようです。

a#aa:hover {
  background: transparent;
}
a:hover span {
  background: #00ffff;
  color: #800000;
  font-weight: bold;
}

修正状況

WinIE6.0では標準・互換モードともに不具合の発生が確認されました。

スポンサーリンク