IE:クリックするとfloatした要素の親ボックスの余白(padding)が広がる

IE6で閲覧していたときにこんなことがありました。
テキストエリアをクリックしたとき、その親領域が下方向に少し広がった(ずれた)。

IEでfloatのバグといえば、ブロック要素にmarginを指定すると値が2倍になってしまうという有名なものがあるが、今回はpaddingで発生するバグ。

IEでは発生したが他のブラウザでは大丈夫で、おそらくIE特有のバグなんだろうということで対策を検索していたが、どうにも見つからなかった。

発生条件は以下の通り。
・テキストエリアの右側にsubmitボタン。
・それぞれliで囲まれfloatによって左右に配置されている。
・両者を内包するulにはclearfixが適用されている。
・ulには余白(padding)が設定されている。


ul.commentBox{
width:500px;
padding:5px;
}

ul.commentBox:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
}

ul.commentBox li{
float:left;
}

原因の特定:
・liのfloatをやめたら現象は消えた。
・ulのpaddingをなくすと現象が消えた。
・clearfixの問題は無い(IE向けにはulの幅指定、zoom:1;などは無用)
・ulを内包するさらに親要素(div)にもfloatが使用されていたため、多用による問題かと思われたがそうでもない。

対応策:
今回のケースは純粋にli内それぞれに1要素ずつしか入っていなかったため、floatでの配置をやめて、display:inline;を適用。

CSSは以下の通り。


ul.commentBox{
width:500px;
padding:5px;
}

ul.commentBox li{
display:inline;
}

月曜日, 9月 27th, 2010 browser, css, Internet Explorer

Leave a Reply

コメントを投稿するにはログインしてください。

2022年1月
 1
2345678
9101112131415
16171819202122
23242526272829
3031