Internet Explorer (Windows) CSSバグリスト

アンカーを:hover状態にすると親ブロックの高さが変化する(5.5/6.0)

2003-05-14再作成。

症状

以下の条件群のいずれかに該当するとき、アンカーにマウスポインタ等を乗せて:hover状態にすると内側から3番目のボックスの高さが増加したり減少したりする。

• 条件群1
  • 3重以上の入れ子ブロックになっている。
  • 一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している。
  • 最も内側のブロックに任意の上下マージンを設定している。
  • 内側から2番目のブロックに背景とボーダーを設定している。
  • 内側から3番目のブロックに任意の幅を設定している。
• 条件群2
  • 3重以上の入れ子ブロックになっており、最も内側のブロックが複数存在する。
  • 一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している。
  • 内側から2番目のブロックに任意の上下マージンを設定している。
  • 内側から2番目のブロックまたはそれより内側にある要素に背景を設定している。
  • 内側から3番目のブロックに任意の幅を設定している。

例示

<style type="text/css">
a:hover {
  background: aqua;
}
</style>

<div style="width:50%; border:2px solid red;">
<div style="background:yellow; border:2px dashed green;">
<div style="margin:1em 0;">
<a href="../winie.html">WinIEバグ</a>
</div></div></div>

<div style="width:50%; border:2px solid blue;">
<div style="margin:1em 0;">
<div><a href="../winie.html">WinIEバグ</a>
<span style="background:yellow;">Inline</span></div>
<div><a href="../winie.html">WinIEバグ</a>
<span style="background:yellow;">Inline</span></div>
</div></div>

2つの例を置いています。前者は条件群1の例、後者は条件群2の例です。アンカーをポイントして動作を確かめてください。

スクリーンショット

※マウスポインタを載せた後のスクリーンショットです。なお、マウスポインタを載せる前のWinIE6.0での表示はN7.02のスクリーンショットと同じ状態でした。

補足

バグの回避法がいくつか分かっています。

• 内側から3番目のブロックで幅を指定しない。（条件群1と条件群2の両方に有効）
• 最も内側のブロックの内部かつa要素より後ろにブロック要素を置く。（条件群1と条件群2の両方に有効。ただし、条件群2の場合はブロック要素自身またはその子孫要素に背景を指定してはならない）

  <div style="width:50%; border:2px solid red;">
  <div style="background:yellow; border:2px dashed green;">
  <div style="margin:1em 0;">
  <a href="../winie.html">WinIEバグ</a>
  <div>ブロック要素</div>
  </div></div></div>

• 背景をなしにする。（条件群1と条件群2の両方に有効）
• 一番内側のブロックのマージン量と内側から2番目のブロックのマージン量を同じにする。（条件群1と条件群2の両方に有効）

  <div style="width:50%; border:2px solid red;">
  <div style="margin:1em 0; background:yellow; border:2px dashed green;">
  <div style="margin:1em 0;">
  <a href="../winie.html">WinIEバグ</a>
  </div></div></div>

• 内側から2番目のブロックにボーダーを設置しない。（条件群1に有効）
• 内側から2番目のブロックにボーダーを設置する。（条件群2に有効）

ただし、場合によっては別のバグ（WinIEバグ103）が発生するので注意してください。

修正状況

WinIE5.5、WinIE6.0標準モード、WinIE6.0互換モードで不具合の発生が確認されました。