●問題
主にIE6で発生しがちな問題だけど、他のブラウザでも起こりうる。
きっちり計算してwidth、padding、border、marginを指定したはずなのに、
その通りにレンダリングされない事がある。
ブラウザ間での誤差が生じることも多い。
●解決
考えられる原因が多すぎて一概には言えないが、
基本的なcssの指定として、widthを指定しない事で解決できる場合がある。
例えば、width:200pxのdivの中に、右寄せでwidth:150pxのリストを入れたいなら、
リストにwidth:150pxを指定するのではなく、divにpadding-right：50pxを指定するべきだ。
ブラウザ間で誤差が発生するのを防げるほか、後からのデザインの調整を行いやすいというメリットもある。
上の例なら、divのwidthを広げたり、縮めたりした時、リストも自然とその幅に調整される。
IE6の解釈はバグであるが、IE6がターゲットブラウザに含まれない場合もそうした方がよい。
●その他
余計な余白やはみ出しなんかの原因は他にもたくさんある。
IE6のバグをよく把握することは、IE6がターゲットブラウザに含まれる場合は当然の事、
これから先増えるであろう、昔作られたwebサイトのリニューアルなどの案件で重要になると思う。
主にIE6で発生しがちな問題だけど、他のブラウザでも起こりうる。
きっちり計算してwidth、padding、border、marginを指定したはずなのに、
その通りにレンダリングされない事がある。
ブラウザ間での誤差が生じることも多い。
●解決
考えられる原因が多すぎて一概には言えないが、
基本的なcssの指定として、widthを指定しない事で解決できる場合がある。
例えば、width:200pxのdivの中に、右寄せでwidth:150pxのリストを入れたいなら、
リストにwidth:150pxを指定するのではなく、divにpadding-right：50pxを指定するべきだ。
ブラウザ間で誤差が発生するのを防げるほか、後からのデザインの調整を行いやすいというメリットもある。
上の例なら、divのwidthを広げたり、縮めたりした時、リストも自然とその幅に調整される。
IE6の解釈はバグであるが、IE6がターゲットブラウザに含まれない場合もそうした方がよい。
●その他
余計な余白やはみ出しなんかの原因は他にもたくさんある。
IE6のバグをよく把握することは、IE6がターゲットブラウザに含まれる場合は当然の事、
これから先増えるであろう、昔作られたwebサイトのリニューアルなどの案件で重要になると思う。