MT3.3にアップグレードしてからバナーに画像を貼ったところ、なかなかレイアウトがきっちり収まらなくて困ってたんだけど、Firefoxでも確認した結果、やっと原因がわかった。実は、containerのwidthを800にして、bannerを790pxに、banner-innerのpaddingが5pxにしてたんだけど、バナーの画像が800x120pxというサイズだと、IE6では、container(800px)の中にbanner(790px)が入るはずなのに、そこに表示する画像の幅が800pxだと、bannerが800pxあるものとして表示してしまうらしく、結果として、期待している800pxよりもcontainerの大きさが広がってしまい(厳密には800pxに左右のpadding値が加わる)、謎の余白ができてしまっていた。
これがFirefoxやIE7の場合は、バナーの画像がbannerのwidthよりも大きい場合は、枠からはみ出した画像として表示されるんで、alpha,beta,gammaの各要素は期待通りの幅で表示される。逆に、バナーに画像を貼らないか、bannerよりも幅が狭ければレイアウトは崩れない。ということで、バナー画像を800pxから790pxに変更して対処することができた。
コメント