DOCTYPE スイッチと表示の差
2007年07月30日17:45
IEとFirefoxの表示の差について、何度も記事にしてきたのですが、どうやら私が認識していたのはその一部に過ぎないと言うことが判明いたしました。
何度ももういい加減まとまっただろうと思っていたのですが、どんどん迷走していたみたいです。
今度こそまとまってくれると良いなあ。

今回参考にさせていただいたのは、
2xup.org　さま
・各表示モードによる CSS 解釈の違いをまとめたドキュメントを共有

最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。

DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。


以前の記事では、「DOCTYPEの宣言文」とか呼んでおりましたが、「DOCTYPE スイッチ」というのが一般的だそうで、当サイトでもこれからそう呼びたいと思います。

この「DOCTYPE スイッチ」、何をしているかと言いますと、XHTMLやHTMLのタイプをブラウザに宣言しているようなものです。この宣言によってstandards modeやquirks modeが切り替わり、ブラウザの挙動が変わってしまい、ブラウザによる表示崩れなどが起こります。

ではまずどういうXHTMLやHTMLがあるのでしょうか。

＜XHTML＞
・XHTML 1.1
・XHTML 1.0strict
・XHTML Transitional
・XHTML Frameset
＜HTML＞
・HTML4.01
・HTML4.01Transitional
・HTML4.01Frameset

これだけあるだけでも大変なのですが、これがDOCTYPE スイッチの「ちょっとした記述の違い」でまた挙動が違うものでさらに大変です。

で、この「ちょっとした記述」というのが何かをまず理解しないといけないようです。
下図は、当サイトのDOCTYPE スイッチなのですが、「ちょっとした記述」に関して色分けしています。



<?xml version="1.0" encoding="EUC-JP"?>
この部分をXML宣言、というらしいです。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
この部分を公開識別子というらしいです。

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
この部分をシステム識別子というらしいです。

公開識別子によって、XHTMLやHTMLの種類が指定してあるのですが、XML宣言、システム識別子の有り、無しによって同じ公開識別子でも挙動が変わってきます。

特にインターネットエクスプローラー（IE）６は、曲者です。
Windows IE 6 だけ後方 (過去) 互換モードになっているところがあります。これは DOCTYPE 宣言の前に半角スペース以外の文字を含む行が有る場合、後方 (過去) 互換モードになる。というバグが原因です。

つまり、サイト管理者はXHTMLだからXML宣言したいのだけど、IE6は「XML宣言しようものなら、勝手に互換モードにしますよ」と。むちゃくちゃなヤツです。

＜自分的まとめ＞
IE7、IE6、Firefoxくらいしかカバーできないので、そこだけ自分的まとめを。

・共通
HTML 4.01 Transitional、HTML 4.01 Framesetのシステム識別子なしは全てquirks mode。

・IE7
全て standards mode。

・IE6
全て standards mode。
ただし、XHTMLでXML宣言が入ると quirks mode。

・Fifrfox
XHTML 1.0 Transitional、XHTML 1.0 Framesetで、almost std（ほぼ標準モード）。
HTML 4.01 Transitional、HTML 4.01 Framesetのシステム識別子ありで、almost std（ほぼ標準モード）。
あとはstandards mode。


当サイト、livedoorBlogのDOCTYPE スイッチは、XHTML 1.0 TransitionalのXML宣言ありだから、
IE7　standards mode
IE6　quirks mode
Firefox almost std
面白いほどバラバラです。やってくれましたね、livedoorBlog（＾＾；


話は実はここからです。
2xup.orgさまでは、表示モードごとに CSS や HTML の解釈を確認するためのページを準備してあります。表示の差が気になるという方は、これを見ながら表示の差を検証することができます。
ただ、私が下記ような記事で以前から気にしていた、「幅・高さの計算」「標準のフォントサイズ」というのは解釈の違いのほんの一部に過ぎなかったということが検証されています。
・IEとFirefoxの表示の差
・IEとFirefoxの表示の差・再び
・FirefoxとIEのfontの表示の差


DOCTYPE スイッチによる表示モードの違いでどのような差が出るのか、ちょっともう、大変なので項目だけ列挙させていただきましょう（笑）。

・幅・高さの計算
・text-align でブロック要素を揃える
・左右に auto のマージン
・標準のフォントサイズ
・非置換インライン要素に幅と高さを指定
・属性値の大文字・小文字区別
・単位必須の数値に単位が無い場合
・# の無い16進数 (6桁・3桁) での色指定
・値が pre の white-space プロパティの処理
・高さ単位が % の要素の算出対象
・高さ単位が % の要素の算出対象 (body 要素の最初の内包要素)
・html 要素へのスタイル定義


IEとFirefoxの表示の差、他のブラウザとの表示の差を埋めるには、実はこれだけの項目をチェックしなければならなかったのです。
私自身もどおりであの変更をした時に表示に違いが出たわけだ、と思い当たる節がちらほらと入っています。
今のところほとんど理解もできておりませんが、少しずつ理解して行きたいと思います。

ブラウザによる表示の差に苦しんでおられる方は、一度2xup.orgさまの記事、ご覧になってみて下さい。


│clip! │HTML・CSS解説  | FireFox
このBlogのトップへ │前の記事 │次の記事

この記事へのコメント
ここは名前を入れる欄かな
2007年08月04日 01:37
5

非常に簡易で分りやすいです。
専門サイトのように肩肘張らずに、閲覧できて良いです。
かなり参考になります。
疑問の数々がはれていく感じです。

素敵です。
また来ます。

afiliate
2007年08月04日 11:14
どおも〜ここは名前を入れる欄かなさま。
そちらは名前を入れる欄となっております。ご自由にお名前などをご入力くださいませ。

うう、うれしいコメントをありがとうございます。
｡･ﾟ･（ﾉД｀）･ﾟ･｡ ｳﾜｰﾝ
当サイトは何のとりえもないおっさんのぼやきのブログと自覚はしておりますが、いろいろ考え込んで、たまに落ち込むこともあります。
こうしたありがたいコメントをたまに頂けることで、もうちょっとがんばっていこうかなあ、とちょっぴり元気を頂けます。
本当にありがとうございました。

ミセス・かんちがい
ミセス・かんちがい
2007年10月10日 15:14
今日、Firefox関連の記事を書きました。
afiliateさんの記事や画像を沢山お借りして記事を
書かせて頂きました。
いろいろと追記の記事を書いておられますが、
私にとっては「IEとFirefoxの表示の差」の記事が
一番役立ったので、本当はそちらの記事ににトラック
バックさせて頂きたかったのですが、コメントもトラ
ックバックもできなくなっていたようでしたので、
カテゴリー中の最新記事であるこちらの記事に
（あ…“firefox”のカテゴリーではなくなっていま
したね…(^^;)　トラックバックさせて頂きました。
（どの記事にトラックバックすれば良いかご指示くだ
　されば、トラックバックをやり直します。
　スミマセン…）

これからも、わかりやすく役立つ記事を楽しみに
しております^^

afiliate
2007年10月11日 01:25
どおも〜ミセス・かんちがいさま。記事拝見しました。
良い感じに紹介していただいて本当にありがとうございました。ヒデキ感激です（笑）。

alt属性とtitle属性に関しては私の方が教えてもらった気がします。title属性とalt属性が違うとIEでもtitle属性が表示されるんですね。勉強させて頂きました。
休止する際に、やめるかもしれないとも思ったので、休止前の記事のトラバ・コメントは全て閉じています。その後もスパムが付かないので楽なのと面倒くさいのでそのままにしています（笑）。早速、該当記事のみトラバ欄あけました。お気軽にトラバされてください。
トラバは関連のありそうなところにされて良いですよ。スパムでないものは基本的に消しません。スパムっぽいものは読まずに削除してますが（笑）。
ご紹介本当にありがとうございました〜。

上海パラダイス
2007年12月11日 22:04
5

私のようなシロウトに、簡単/判りやすく説明して頂いて本当に感謝です。調査やブログ作成に多くの時間をかけていただき、ありがたいです。特に当地ではマニュアルが簡単に入手できないもので助かりました。

afiliate
2007年12月12日 15:02
どおも〜上海パラダイスさま。コメントありがとうございます。

私もあんまり詳しくないのですが、お役に立てましたら、嬉しいです。
これからも参考にしていただけるような記事を書きたいです。




この記事へのトラックバック


1. Firefoxを入れて気づいたこと （ＩＥとの表示の違い）  [ ミセス・かんちがいのブログ日記 ]   2007年10月10日 14:20

2007年10月10日（水） 前回書いたように、しばらく前に、firefoxをインストール してみた。 入れる前から、ある程度の予備知識はあった。 afiliateさんの「アフィリエイトは儲かんないっ...


2. DOCTYPE  [ GSTYLE Blog ]   2008年06月24日 12:50

前回出てきた&amp;lt;!DOCTYPE&amp;gt;について。 HTMLはまず「DTD」（Document Type Definition:文章型定義）の宣言が必要になる。 このDTDには要素や属性の名称や親子関係などが定義されている。 HTMLには様々なバージョンが存在し、もっとも使われているHTML4.01と...