大抵のCSSバグは、回避法が有るので何とかなるのですが、回避法が特に存在していないバグの場合非常に困ります。
最近の仕事で、IEバグでは比較的発生しやすいIEバグが起こったのでメモとして記しておきます。
floatで左右どちらかに寄せているボックスに、marginの値を指定するとIE5.x/IE6の環境下で、指定値の2倍程度のmarginが設定される。
大抵の場合はpaddingで代用出来るのですが、今回のケースではdivなどのボックスに対して指定せず、h3などのblock要素に直接floatを指定し、marginで調整しようとした際に発生。
該当のh3には背景画像が指定されており、テキストの位置をpaddingで調整していたので、marginを指定するしか無く、バグが発生しました。
対応方法でいくつか候補はあったのですが、今回はアンダースコアハックで対応。
divを追加して対応という方法も勿論あるのですが、バグ対応の為に本来だったら必要の無いdivを増やす事に抵抗を感じ、ハックで対応しました。
簡単にまとめ。
IEのフロート化させたボックスに左右マージンを指定すると、指定値の2倍程度のマージンが設置されるバグが発生した際は…
- divなどを追加してfloatを指定していないボックスにmarginを指定する
- 背景画像が指定されていない場合は、paddingで対応
- IE限定バグの為、アンダースコアハックなどのハックで対応
- 見映えがさして変わらない場合、気にしないのが得策