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

症状

以下の条件群のいずれかに該当するとき、アンカーにマウスポインタ等を乗せて: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>

WinIEバグ

WinIEバグ Inline

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

スクリーンショット

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

N7.02での表示（標準モード）

WinIE6 WinIE6.0での表示（標準モード）

補足

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

内側から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バグ</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バグ</a>
</div></div></div>