HOME » css , design , Firefox , html , IE , mac » width解釈の違いへの対応策
width解釈の違いへの対応策
最近、「ブラウザによって見え方が違う。」と年中ごねておりましたが、どうにか問題が解決したので、このことで二度と悩まないように覚え書きしておこうと思います。
このサイトはメインコンテンツの周りをサイドバーの背景色と同じ色で囲うという作りになっています。
（さらに前は本文部（白背景）も枠で囲ってあったのですが、borderで囲えば囲うほどサイドタイトル横のマークの位置がずれてくるのでやめました。）
この設定だとサイドバーの左右の余白がきっちりと揃い、見た目が美しくなるのでご満悦だったのですが、どうもIEとFirefox（以下FF）で見た目が違うんですね。
あれこれ数値をいじってみた結果、どうやらIE6とFFではwitdhの解釈が違うらしいと言う事が判明。
ボックスにborderを設定する場合、IEだとボックスの外側をborderでぐるっと囲む形になるのに対し、FFではボックスの内側にborderが入り込む形になっているっぽいのです。
私の場合、幅800pxのボックスに10pxのborderを設定していたので、結果IE6とFFでは20pxのずれができてしまい、それがデザイン崩れの大きな原因であるようでした。
contents要素にborderを加えると、FFで微妙にデザイン崩れを起こしていたのも同じ理由のようです。
＜幅:820pxの場合＞ IE6：正常に表示。 FF：右サイドの横に20pxの余白ができる。 ＜幅:800pxの場合＞ IE6：ボックス幅が足りないので、右サイド要素が左サイド下に回り込んでくる。 FF:正常に表示。
ようやく原因が分かったので調べた結果、理由と対策をビシッと説明してくださっている神のようなサイトさんを発見しました。
Alternative Design Projectさん：IE6のwidth解釈バグ対処法
胸がす～っとするほどの、非常にわかりやすい説明でした。
要点だけかいつまむと、正式なcssの解釈ではFFのように、borderはボックスの内のりに配置されなければいけないのですが、IE6にはボックス幅とborder幅を分けて考えてしまうという、かなり致命的なバグがある為に、レイアウト崩れが起こってしまうそうです。
IE最悪です。
このような問題を起こさないためには、基本的には、きっちりwidth設定をするcssを使用する場合、border要素を使わないのが一番だそうで…。
（「XML宣言をしない」と言う対処法もあるみたいですが、これはこれで問題があるようです。詳しくはリンク先記事参照。）
こちらの記事には、
「それでもborder使いたいんだよ(ﾟДﾟ)!! 」
と言う私のようなヤツにうってつけの対処法もちゃんと紹介されています。
border設定したいボックスの外に、さらにボックスを設置し、内側のボックスだけにpaddingを設定する事により、擬似的にborderをつけた時と同じように表示させる方法です。
この方法を採用した結果、うちのサイトのid要素はこんな具合になりました。
何だか囲いだらけです…。
3カラムを囲う#boxの外にもう一つボックスをつけて、外側のボックスに幅を、内側のボックスにpaddingを設定してみました。
こうする事によりcssを認識するブラウザであれば、だいたい同じように表示できるようになるそうです。
どうにかこのサイトも、レイアウト崩れを起こさないで見られるようになりました。
macだとどう見えるのか分からないのが玉に瑕ですが、多分大丈夫だと思いたいです。
肩の荷が一つ下りて、今日はいい気分で寝られそうです。
もしレイアウト崩れに悩んでいる方がいらっしゃったら、是非リンク先の記事を読んで見てくださいませ。
目から鱗がぼろぼろ落ちます。
Comments & Trackbacks : 7
お久しぶりです！
またまたMTでも参考にさせていただいてますo(≧∀≦)o
テンプレートもいいかなーって思ってたんですが、
自分で頑張ってみようと思いついに３カラムにしてみました。
とりあえずMacではきれいに見えますがWinではどうでしょう？
ちなみにもそさんのはMacIEでもOKです。けどMac IE5,2ではサイドバーの折り畳みが動いてません。
それからSafariではしっかり表示されて折り畳みも動いてますが折り畳みのボタンがちょっと右にはみだしちゃってます。
今見に行ってみましたが、、winだと左カラムと中央コンテンツの間が妙に開いちゃっているみたいです。
macの見た目を教えて頂いてありがとうございます。
折りたたみマークがずれている理由は正直分かりません。
なんででしょうねぇ。
折りたたみマークについてはMacIEと外部jsファイルの相性が良くないと言う事なので、元記事コメントを参考に設定を変えてみました。
多分これでちゃんと開け閉めできるようになると思うのですが…。
初めまして。CARNIVALと申します。
このエントリーを拝見しまして、やっと自分のとこの原因不明レイアウト崩れ
を修正することができました。助かりました。
バグだらけのIEには振り回されっぱなしで本当に参りますね…。
バグ再び…IE6のwidth解釈
先日から、BROWN.Hさんがコメントで教えて下さったHTML文書の文法チェッ…
＞CARNIVALさま
お役に立てて幸いです。
このあともIEに振り回される事が何回か有り、その度に頭に来つつ修正しています。
私、winユーザーですけど許せないです、はい。
IE5.xでのボックス表示を修正する
IE5.x（Netscape4.xも）やIE6の後方互換モードではCSSの wi…
固定3カラムのIE6・後方互換モード対処方法
公開中の固定3カラムテンプレートをXHTMLに適用させる場合、1行目にXML宣言…