レイアウトがブラウザ毎に異なった表示となる場合の原因

XHTML+CSSでWebサイトを作成した場合に、ブラウザ毎にレイアウトが異なってしまう場合があります。

以下の可能性が考えられるので一度確認してみてください。

-Doctype宣言が誤っている>#vc431ecd
-CssでFloatを使っている場合のInternet Explorer6.xのバグ>#p9aeae44

Doctype宣言が誤っている

”[発生する現象]”
Doctype宣言を誤った記述にしていると以下の現象が発生する事があります。

-Internet Explorer6.xとFirefox,opera,Safariなどでレイアウト特にボックス定義の幅や高さが大きくずれる。

”[原因]”
XHTMLで記述をする場合に、１行目にどのようなバージョンでこれから記述するXHTMLを解釈して欲しいかを記載するの箇所が適切でない場合、ブラウザ(Internet Explorer6.x)によっては、CSS の仕様に準拠した正しい表示が期待できる標準準拠モードでブラウザ表示を行うはずが、CSS の仕様に準拠しないブラウザに依存した勝手な（独自の）表示を行う後方互換モードに切り替わってしまうという問題を抱えた実装になってしまう事がある。

Internet Explorer6.xは、互換性モードの場合、CSSの仕様と異なる「margin・padding・width・height」の考え方となる。

”[対応]”
以下の通りXHTMLの一行目から記述する事で、Internet Explorer6.xでも標準モードでCSSを認識します。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Doctype宣言による標準モード・互換モードの各ブラウザ認識に関しては、こちらのサイトに詳細が記述してあります。同サイトにて各ブラウザの解釈に関するマトリックスも掲載されています。

CssでFloatを使っている場合のInternet Explorer6.xのバグ

”[発生する現象]”

-Floatを使用したブロック要素にmarginを指定するとWindowsのIE6でfloatさせたボックスへ指定した左右のmarginが正常に反映されない(倍になる)。

具体的な現象のイメージは、The IE Doubled Float-Margin Bugを確認してください。

”[原因]”

-Windows IE 4〜6、Mac IE 4〜5のバグ(CSS初心者の場合、このバグに気づかず自身の記述が誤っているのではないかとよく勘違いします。)

※この問題は、IE7では解決しています。

”[対応]”
いくつか方法があります。以下はもっとも簡単な対応方法

[対応方法１]
非常に簡単だが、このfloatboxの中身によってはレイアウトが崩れる可能性も否定できない。

 #floatbox {
   margin-left: 40px;
   float: left;
   width: 160px;
   display: inline;  /* ←　ブロック要素をinline要素にする事で回避*/
 }

[対応方法２]
Windows IE 4〜6、Mac IE 4〜5のみに対してだけ有効な別のCSS記述
以下の通り２つのCss定義を用意する。*html body #floatboxの記述に関しては
IE6だけが認識できる構文となる為に

Firefoxなど　→#floatboxのCSS適用
IE6　　　　　→ *html body #floatbox のCSS適用

という形になり、*html body #floatboxは通常marginの半分を指定している為に正しく認識しているように見せる事ができる。

 #floatbox {              
   margin-left: 40px;
   float: left;
   width: 160px;
 }
 
 /*　ここからWindows IE 4〜6、Mac IE 4〜5のみに対してだけ有効なCSS */
 *html body #floatbox {  
   margin-left: 20px; /* marginが上記40pxの半分で指定*/
   float: left;
   width: 160px;
 }

頭に*(アスタリスク)を記述したCSS定義はWindows IE 4〜6、Mac IE 4〜5のみにしか認識されないCSSハックとして
スターハックと呼ばれています。

CSSハックとは？

上記のように、CSSで設計すると
ブラウザによってどうしてもレイアウトに違いが発生する事があります。

この対応策として特定のブラウザに対してだけ異なる
ＣＳＳ構文を指定できる記述方法が必要となる場合があります。
特定のブラウザだけに有効なCSS構文を記述する手法はCSSハックと呼ばれ
さまざまな記述方法が発見されています。

CSSハックの様々な手法に関しては、たとえばこちらをご覧下さい。

他にも検索エンジンで「CSSハック」とキーワードを入力して検索すると様々なサイトで
ハック方法が紹介されています。

レイアウトがブラウザ毎に異なった表示となる場合の原因