自作CSSで「FirefoxとIEの表示の違い」に苦しむ
このブログ 「DigDag」のCSSは自分で書いたんだけど、
普段僕が使っているブラウザはFirefox。
友達のPCとか会社のPCのブラウザはIEの6と7。
このブログをIEで表示するとレイアウトが崩れたり背景画像が表示されていなかったり・・・。
「一体なぜ？」
というわけでFirefoxでもIEでもキチンと表示されるように、
このブログのCSSも改善しなくては。
それにはまず、FirefoxとIEでどのような違いがあるか確認しなくっちゃ
Firefox と IEでの表示の違い
まずは検索して参考になりそうなサイトを探しました。
僕と同じように悩んでいる人はたくさんいるらしくて、参考になるページはたくさんありました。
色々と検索していくとレイアウトの崩れる原因のひとつが解ってきた。
それは、FirefoxとIEではCSSのwidth、heightプロパティの認識の違いです。
下の図をご覧下さい。
通常CSSでレイアウトするとき「ボックス」を構成していき、2カラムや3カラム、ヘッダーやフッターを作っていくわけですが、width（幅）を決めてレイアウトしていきます。
widthを決定したものに対して、margin、padding、borderなどを指定してボックスが構成されます。
例えばつぎの条件でCSSを書いたとします。
- widthは500px
- paddingは上下左右に10px
- borderは上下左右に1px
この時Firefoxでのボックスの認識は、
width「500px」＋padding「10px」＋border「1px」となり、「合計511px」のボックスが生成されます。
（注：marginはボックスには含まれません。)
つまり上の表で言うと、width500pxは「コンテンツ」の部分に反映されます。
それに対してIEでは、width500pxは、padding「10px」、border「1px」を含めて「500px」として構成してしまいます。
つまりIEでのコンテンツの幅は「489px」になってしまうという事です。
これがFirefoxとIEでレイアウトが崩れる原因のひとつですが、どうやらコレだけではないようです。
色んなページを見ていると「IEの表示が正しくて、Firefoxの表示が崩れる」という書き方のページが多く見られますが、「ウェブ標準」という考え方でいくと全くの逆。
IEの方が厄介だという事がわかってきます。
IEを使っている人が多数ですからこういう誤解が生まれるのでしょうが、僕にとっても厄介なのはIEです。
以下はそのことについてまとめていきます。
DOCTYPE スイッチ「DTD」による表示モードの切り替え
FirefoxやIE、Opera、Safariのようなホームページを閲覧するアプリケーションを「ブラウザ」といいますが、
そのブラウザには「表示モード」というものがあるのはご存知ですか？
この表示モードは大まかに2種類あり、「標準準拠モード」「後方（過去）互換モード」と呼ばれています。
- 「標準準拠モード」
- Ｗ3Ｃが推奨する、いわゆる世界標準の表示モード。
つまりこれから先、世界標準の標準準拠モードでサイト作ってれば問題なしになるはず。 - 「後方（過去）互換モード」
- 後方（過去）互換とは、IE6以下に互換性を持たせるモード。
IE6以下の標準準拠モードに対応していない古いブラウザでの表示を考えたモード。
この2つの表示モードをどちらか一方に絞ってページを作成していけば同じように表示されていくはずです。
この表示モードの切り替えは「DOCTYPE スイッチ」、「DTD」によって宣言するわけです。
この「DTD」についてはまた詳しく特集していきますが、ここでも厄介なのがIE。
IEでは「標準準拠モード」を宣言しても「後方互換モード」を採用してしまうというバグ（エラー）があります。
それもまた表示が崩れる原因のひとつになっています。
- 今回参考にしたページ
- CSSレイアウト実践講座
- IEとFirefoxの表示の差
- IEとFirefoxの表示の差・再び
- 各表示モードによる CSS 解釈の違いをまとめたドキュメントを共有
- DOCTYPE スイッチと表示の差
- DOCTYPE宣言による表示の違いについて
- ボックス要素
- クロスブラウザ、5つの掟
- ボックスモデルとは？
- CSSレイアウトの定石 WinIE6バグ回避法
webブラウザの動作モードは、W3CによるCSSの仕様に従う標準準拠モードと、古いブラウザの挙動に合わせる過去互換モードの2種類に大別されます。
ただし、過去互換モードでは、webブラウザにとって挙動が異なるため特に理由がない限り標準準拠モードでダウささせたほうがいいでしょう。なお、Windows版IE6はDOCTYPE宣言の位置が重要で、これが文書の先頭にないと過去互換モードになってしまいます。
したがって標準準拠モードにするためには、XML宣言を記述することができません。CSSの仕様とは反しますが、ドキュメントの文字コードがUTF-8の場合、XML宣言がなくても不具合がないためIEで標準準拠モードで動作させるためには現状ではXML宣言を省力する必要があります。
なおIE7ではそのバグは修正され、先頭にXML宣言を記述しても標準モードで動作させることが出来ます。
次の記事では「DTD」についてもう少し探っていきます。
「ＦｉｒｅfoxとIEの表示の違いをどう解決するか？ 」
- posted：2007/09/30：Sun
- 12 ： 21： 29
- ：ブラウザ
- ：Firefox 悩み IE CSS
- ：RSS
- comments : 0
- trackbacks : 0
- ：edit
Comments
What say you?
Track backs
http://digdagdig.blog117.fc2.com/tb.php/82-cb2e68c2
