私はCSSコーディング中にIEでプレビューすると、a:hoverで上下マージン(margin,padding)が変わることがよくある。
これには以下のような条件があるようだ。
- 条件1:
- 3重以上の入れ子ブロックになっている。
- 一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している。
- 最も内側のブロックに任意の上下マージンを設定している。
- 内側から2番目のブロックに背景とボーダーを設定している。
- 内側から3番目のブロックに任意の幅を設定している。
- 条件2:
- 3重以上の入れ子ブロックになっており、最も内側のブロックが複数存在する。
- 一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している。
- 内側から2番目のブロックに任意の上下マージンを設定している。
- 内側から2番目のブロックまたはそれより内側にある要素に背景を設定している。
- 内側から3番目のブロックに任意の幅を設定している。
下記サイトによると、バグの回避法がいくつか分かっているようだ。
Internet Explorer (Windows) CSSバグリスト
- 内側から3番目のブロックで幅を指定しない。（条件群1と条件群2の両方に有効）
- 最も内側のブロックの内部かつa要素より後ろにブロック要素を置く。（条件群1と条件群2の両方に有効。ただし、条件群2の場合はブロック要素自身またはその子孫要素に背景を指定してはならない）
- 背景をなしにする。（条件群1と条件群2の両方に有効）
- 一番内側のブロックのマージン量と内側から2番目のブロックのマージン量を同じにする。（条件群1と条件群2の両方に有効）
- 内側から2番目のブロックにボーダーを設置しない。（条件群1に有効）
- 内側から2番目のブロックにボーダーを設置する。（条件群2に有効）
私が経験した範囲では、多重入れ子のブロック要素のマージン量の関係が原因のようだった。どちらにしても正しいXHTMLとCSSによってコーディングするように心掛けなくては。
