Web標準の日々 X6 ブラウザ表示モード解説:傾向と対策

ブラウザ表示モード解説:傾向と対策

上ノ郷谷 太一さん

標準準拠モードと後方互換モード。現在利用できる一般的なウェブブラウザは、文書型宣言の有無や記述の仕方によって（X）HTMLを表示するモードを切り替える仕組み（DOCTYPEスイッチ）を持っており、その違いは主に CSS の振る舞いに影響します。各々の表示モードでブラウザごとの CSS の振る舞いにどのような違いがあるのかを、対策方法などをまじえて解説します。

DOCTYPEスイッチと聞いて、はじめは正直ピンとこなかったのですが、自分が標準互換モードとかDOCTYPEスイッチについて特に意識していないことに気付き（というよりか、なんかややこしい問題だから避けていたのかもしれません）受講してみることにしました。

セッションで紹介された解釈の違いについて記載していきます。

ボックスモデルの解釈の違い

WinIE7・WinIE6・MacIE 5.2の後方互換モードでは、幅(width)と高さ(height)にボーダーとパディングを含める

対策としては、中に含むブロック要素にmarginで指定をする

text-alignの解釈の違い

WinIE7・WinIE6の標準モードと後方互換モード&MacIE 5.2の後方互換モードでは、text-alignを指定したブロック要素の中のブロック要素にも効いてしまう（通常は文字列・画像のみ）

対策としては、WinIE7、WinIE6の標準モードでは値が auto のマージン無効になるので、ブロックレベル要素のセンタリングにはautoだけではなく、text-alignの指定も加える（バットノウハウ）

単位が % の高さの解釈の違い

すべてのブラウザの後方互換モードでは、ブラウザの表示域に対する割合として解釈される

html 要素にスタイルを指定した際の解釈の違い

WinIE7・WinIE6の後方互換モードでは、ｈｔｍｌ要素に指定したものがbody要素に引き継がれる

インライン要素（displayでブロック要素にしていないもの）の幅(width)と高さ(height)に関する解釈の違い

WinIE7・WinIE6・MacIE 5.2の後方互換モードでは、インライン要素でも指定した幅と高さが表示される

標準のフォントサイズの解釈の違い（初期値は medium）

Opera 9.2・WinIE7・WinIE6・MacIE 5.2の後方互換モードでは、small 相当のサイズになる

対策としては、Yahoo! UI fonts.cssなどを用いる

追記：上ノ郷谷さんのブログ・2xupのエントリー「各表示モードによる CSS 解釈の違いをまとめたドキュメントを共有」にて詳細が記載されています。

これはいつも思うことですが、上ノ郷谷さんの勉強熱心振りには頭が下がります。そして、そのコツコツと勉強というか研究してきたものを公開してくれる姿勢に、ただただ感服です。このセッションはもちろん標準準拠モードと後方互換モードによるCSSの解釈の違いを学ぶセッションですが、それよりも仕事するうえでの姿勢を教えられたような気がしますし、上ノ郷谷さんもそこが言いたかったのでしょう。
なので、私も感服しているだけじゃダメですよね。スライドの最後の方にも書かれていましたが、「なぜ？」と思ったことを大事にし、スルーするのではなくそれを深く掘り下げていくクセを身に着けていこうと思います。

【関連エントリー】Web標準の日々で受講したセッションのレポート

• アクセシビリティ/ユーザビリティ「WCAG 2.0:見えてきたアクセシビリティの新基準/植木 真さん」（7月17日レポート公開）
• SEO/SEM「SEO・SMOを制するWebライティング/住 太陽さん」（7月18日レポート公開）
• JavaScript/Ajax/DOM「jsライブラリで実装する効率的なWeb制作/西畑 一馬さん」（7月19日レポート公開）
• Webディレクション「Web標準とIA/坂本 貴史さん」（7月20日レポート公開）
• アクセシビリティ/ユーザビリティ「事例に学ぶ!成果を上げるユーザ中心ウェブサイト戦略/遠藤 直紀さん」（7月21日レポート公開）
• XHTML+CSS「ブラウザ表示モード解説: 傾向と対策/上ノ郷谷 太一さん」（7月22日レポート公開）
• ユーザー・エクスペリエンス「Contextual Design 経験デザインへの人類学的アプローチ/棚橋 弘季さん」（7月23日レポート公開）
• Webディレクション「情報アーキテクチャ入門/長谷川 敦士さん」（7月24日レポート公開）