これを仮に「内包型」と呼びます。 padding と border を含んで width 200px とします。
ウェブサイト構築のヒント集 ＞ 「玉虫色の IE6」
マイクロソフト社の Internet Explorer （以下 IE）がインターネットをする人のよき友です。 IE をブラウザに用いている人は '04年現在で9割程度、つまりは圧倒的主流派であります。 しかし、CSS の概念を歪んで解釈したまま、いつまでも改善されないという欠陥も持ち合わせています。 CSS のブラウザ対応に関する問題は、 掲げればキリが無いほど膨大な量になるのでここでは IE5.5 や IE5.0 といった旧式の IE が含んでいる問題だけを扱ってみます。
実は IE6 になって重要な変更がなされました。
Windows XP に標準搭載されている IE6 の登場は 2001年の出来事でした。
ブラウザの更新は日本では活発に行われているようであり、
IE6 ユーザー ＞ XP ユーザー という図式が成り立っています。
これを仮に「内包型」と呼びます。
padding と border を含んで width 200px とします。
これを仮に「別腹式」と呼びます。
padding と border を別個に足すので
width = 200px+20px+20px+10px+10px = 260px になります。
こちらの考え方が W3C では正しいとされているので、Mozilla などのブラウザでは問答無用で「別腹式」が採用されています。
| ＼ | Transitional | Strict（XHTML） |
|---|---|---|
| IE5.5 以前 | 内包型 | |
| IE6 | 内包型 | 別腹式 |
| 非IEブラウザ | 別腹式 | |
先ほど、IE6 になって重要な変更がなされたと記述しましたが、 それは文書型宣言によってスイッチ切り替えが可能となったコトが大きいです。 IE6 では HTMLファイルの一行目の記述で DOCTYPE宣言がなされていると、それを参考にしてモード切替を行います。 「内包型」は IE特有の間違った解釈である為、他の系列のブラウザでは「内包型」でレイアウトされるコトはありません。
DOCTYPE宣言の用例（宣言無しの場合は Transitional に準ずる） Transitional の例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Strict の例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XHTML の例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional とは「後方互換」などと意訳されるようですが、 Strict（標準準拠）へ移行していく過程における一時措置として存在しているようです。
しかし、どのようなDOCTYPE宣言が冒頭でなされていようとも、 IE5.5 や IE5.0 では理解しないので注意が必要です。 DOCTYPE宣言が Transitional なら IE6 でも IE5.5以前でも「内包型」で処理されるので見た目の違いは大差ありません。 しかし Strict にしていると、IE6 なら「別腹式」、IE5.5以前なら「内包型」で処理されるので見た目が変化してしまいます。
DOCTYPE宣言は必ずしも一行目に記述するとは限らないのですが、 IE6 では一行目（の先頭）に記述しないと無視されてしまい、「内包型」になってしまいます。
XHTML 1.0 の冒頭記述例 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
XHTML の場合は上記のように冒頭記述を書いたりしますが、 上のように書くと DOCTYPE宣言が二行目になっているので、IE6 では理解してくれません。 理解してくれないというコトは Transitional 扱いにされてしまうというコトです。 一行目（<?xml...）を削って DOCTYPE宣言を一行目に持ってくる方法も考えられますが、 そうすると encoding="Shift_JIS" が消えてしまい、文字コードを識別する記述が無くなってしまうので危険です。
「内包型」か「別腹式」かの違いによって、レイアウトが大きく変化するかというと必ずしもそうとは言えないでしょう。 ただし、頭で計算するだけではしんどいし分かりにくいので、IE の他にも Mozilla などのブラウザを用いて 多方向からページ・レイアウトの表示確認を行うべきです。
ただし、理屈を知らないと 何故IE6 と Mozillaで画面表示が大きく違うのか？ あるいは、 何故IE5.5 と IE6 で画面表示が大きく違うのか？ という謎を解明できないし、 対策も取れないでしょう。 文書型宣言はブラウザ間の画面表示を統一させない主要因の一つです。 それなら書かない方がいいのか？ 「IE ユーザーに対して破綻の無いレイアウトを提供できればいいです」 と、言うのなら文書型宣言を書かない方がいいでしょう。