ブラウザの複数の表示モード
ブラウザのほとんどで「標準準拠モード」、「後方（過去）互換モード」という複数の表示モードを備えています。
しかし、表示モードを切り替える仕組みが統一されてないために、一部のブラウザでは意図したレイアウトが実現されない場合があるのです。
原則として、多くのブラウザで「標準準拠モード」が採用されるように「DTD」を記述することがクロスブラウザ（ほとんどのブラウザで同じように表示させる）の近道となります。
ではどのようにに「DTD」を記述すればほとんどのブラウザで「標準準拠モード」が採用されるのでしょうか？
「DTD」 Firefox IEの違い
- Win IE6の場合
- 「Strict DTD」では「標準準拠モード」が採用される。
- どの文書型でもシステム識別子があれば基本的に「標準準拠モード」が採用される。
- 「XHTML」では基本的に「標準準拠モード」が採用される。
- 「XHTML」ではXML宣言があると、「過去互換モード」が採用されてしまう。
文書型宣言より前に空白類（スペースや改行）以外の文字がある場合、「過去互換モード」が採用されるというバグがあるため - Firefox
- 「Strict DTD」では「標準準拠モード」が採用される。
- 「HTML4.0」について、「Transitional DTD」と「Frameset DTD」ではシステム識別子があれば「ほぼ標準準拠モード」が採用され、システム識別子がなければ「過去互換モード」が採用される。
- 「XHTML1.0」について、「Transitional DTD」と「Frameset DTD」ではシステム識別子の有無に関係なく「ほぼ標準準拠モード」が
採用される。 - 「XHTML」ではXMLアプリケーション向けの「MIMEタイプ」が指定されている場合、「標準準拠モード」が採用される
というようにDTDの宣言の仕方でFirefoxとIE6の表示モードの違いを大まかにまとめてみました。
「システム識別子」というのはDTDの記述の中にある下線の部分です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Firefox IEの表示の違い 暫定的な解決策
という訳で具体的にどのようにして「クロスブラウザ」を実現していくか。
暫定的な解決策を探っていきます。
すべてのブラウザで同じ表示モードが適用されるように工夫する
これが一番の王道ですね。
全てのブラウザで「標準準拠モード」が採用されるようにDTDを記述します。
そうすればボックスモデルの解釈の違いでレイアウトが崩れることはなくなります。
ブラウザごとに異なる表示モードが適用されることを前提にデザインする。
（CSSハックを利用してクロスブラウザを目指す）
この場合、たとえばFirefoxは「標準準拠モード」、IEは「後方（過去）互換モード」が採用されているとします。
Firefoxを基準にしてCSSを書けばIEではレイアウトが崩れたり思うような表示がされないことになります。
そこで「CSSハック」という方法を使って、同じような表示になるようにCSSを工夫します。
CSSハックとはFirefoxにしか採用されないように、または、IEにしか採用されないようにCSSを記述する方法です。
詳しくは別の記事で説明します。
今は「CSSハック」という考え方だけ理解しておいて下さい。
すべてのブラウザで同じ表示モードが適用される方法
全てのブラウザが同じ表示モードを採用させるにはどのようにDTDを記述すればいいのでしょうか？
「HTML」、「XHTML」、バージョンによっても変わってきます。
以下にまとめておきましたので参考にしてください。
すべてのブラウザで「標準準拠モード」が適用される方法
- 「HTML」の場合
- 「HTML4.0 Strict」に準拠する。システム識別子の有無は関係ない
- 「HTML4.01 Strict」に準拠する。システム識別子の有無は関係ない
- 「XHTML」の場合
- 「XHTML1.0 Strict」に準拠し、「XML宣言」は指定しない。
（したがって文字コードセットは「UTF-8」「UTF-16」を利用） - 「XHTML1.1」では「XML宣言」は記述しない。
（したがって文字コードセットは「UTF-8」「UTF-16」を利用）
「したがって文字コードセットは「UTF-8」「UTF-16」を利用」というのは、「XHTML」の場合、
「XML宣言」をしない場合必然的に文字コードセットは「UTF-8」「UTF-16」になってしまうからです。
「XML宣言」というのは、XHTML文書の冒頭に記述する、<?xml version="1.0" encoding="euc-jp"?>のことです。
すべてのブラウザで「標準準拠モード」または
「ほぼ標準準拠モード」が適用される方法
- 「HTML」の場合
- 「HTML4.01 Transitinal」 または「Frameset」 に準拠し、システム識別子まで指定する。
- 「XHTML」の場合
- 「XHTML1.0 Transitinal」 または「Frameset」 に準拠し、「XML宣言」も指定しない。
（したがって文字コードセットは「UTF-8」「UTF-16」を利用）
厳格な(X)HTMLも記述しなくてはならない「Strict」を宣言するより、
一般的な「Transitinal」を宣言することが妥当でしょう。
ですから上記の「DTD」を宣言すれば、理想的な表示モードになります。
すべてのブラウザで「過去互換モード」が適用される方法
現在ではあまり使用しないと思いますが補足的に記述しておきます。
- 「HTML」の場合
- 「HTML4.0 Transitiol」または「Frameset」に準拠し、システム識別子は指定しない。
- 「HTML4.01 Transitiol」または「Frameset」に準拠し、システム識別子は指定しない。
- 「XHTML」の場合
- なし
「DTD」はクロスブラウザの第一歩です。
自分のページはどのDTDを宣言しているのかチェックしてみてください。
「標準準拠モード」が採用されているのか？
それとも「後方互換モード」が採用されているのかがわからなければ「クロスブラウザ」の方法もわかりません。
その上でCSSをチェックすれば「クロスブラウザ」が実現できると思います。
次回は「CSSハック」を詳しくみて行きたいと思います。
「Firefox IEの表示の違い CSSハック 」
- posted：2007/10/14：Sun
- 11 ： 52： 25
- ：ブラウザ
- ：悩み Firefox IE DTD
- ：RSS
- comments : 0
- trackbacks : 0
- ：edit
Comments
What say you?
Track backs
http://digdagdig.blog117.fc2.com/tb.php/110-434f6c3b
