CONFIDELIC

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;
}