MSIE「徐々にずれてゆくスタイル」対策

どんな現象か

既にマージンが存在するul, ol, dl, blockquote 各要素に対し、 padding-bottom と border-left-width を同時に指定すると、下に進むにつれてレンダリングがずれていく現象です。

この現象は、 WinIE 5.5/6.0 でのみ見られる現象ですが、シェアが非常に大きい関係で、これらのバグを見過ごすことは出来ません。

回避する方法

子要素にのみスタイルを指定する

padding-bottom と border-left-width を子要素に指定することにより、バグを回避する方法です。以下に例を示します。

blockquote p{
 padding-bottom:5px;
 border:3px;
}

width:100% を利用する

ul, ol, dl, blockquoteに対し、 width:100% を設定すれば、取り敢えずバグは抑えられます。互換モードでは要素の幅が margin, border, padding を含めて算出されるため、予め幅を設定していない限りは、レンダリングに対して影響を及ぼすことはありません。

WinIE6の厳格モードでは、要素の幅はあくまで「中身」のみなので、レンダリングが崩れることがあります。

附加情報