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の後方互換モードでは、html要素に指定したものが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標準の日々で受講したセッションのレポート

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働いています。ごくたまに個人でもWebサイト作ってます。趣味ではジャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー