左右ボーダーとパディングを設置した要素に後続する部分がずれる

症状

最後の子要素が非匿名ブロックレベル要素である要素の四方にパディングを設置し、さらに左または右にボーダーを設置すると、その要素に後続する要素の内容物がボーダーを設置した方向にずれてしまう。

例示（ソース）

<div style="border-left:1em solid blue; padding:1px;">
<div>div</div>
</div>
<p style="border:2px solid red;">後続の要素</p>

p要素の内容物をボーダーの外にはみ出させるような指定は行っていません。

※実際に表示させたものは別ページにあります。

スクリーンショット

Ns7.1Netscape7.1標準モード

WinIE6.0WinIE6.0標準モード

補足

この不具合によって左右にずれている文字列にリンクが含まれており、さらにその:hover擬似クラスに背景やfont-weight, font-sizeなどのプロパティを指定している場合、リンクが:hover状態になったときに周辺の文字列が移動することがあります。例えば、このページの末尾にあるリンクにマウスポインタ等を乗せると、左方にはみ出していた文字列が右に移動するはずです。

症状で示した条件が1つでも満たされなければこの不具合は発生しません。例えば、ボーダーを内側の要素に設置するなどの方法で不具合を回避することができます。あるいは、外側の要素に対して下ボーダーを設置することでもこの不具合を回避することができます。

<div style="border-left:1em solid blue; border-bottom:2px solid blue; padding:1px;">
<div>div</div>
</div>
<p style="border:2px solid red;">後続の要素</p>
div

後続の要素

修正状況

WinIE6.0の標準モードと互換モードで不具合の発生を確認しました。

関連記事

スポンサーリンク

rightプロパティが親要素のボックスを基準にした配置を行わない

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る