小粋空間: 標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する
標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する
Posted at March 11,2006 1:55 AM
Category：[CSS]
Tag：[CSS, DOCTYPE, Dropshadow, Image]
Hatena ブックマークdel.icio.uslivedoorGoogle BookmarksYahoo!ブックマークPOOKMARK AirlinesニフティクリップBuzzurlnewsing it!
IEでドロップシャドウ画像に枠を表示する以前エントリーした「CSSで画像に影をつける（ドロップシャドウ）」で、IEで画像枠が表示されない不具合についての対処方法です。
対処することで、スクリーンショットのようにIEでも画像枠が表示されるようになります。*1
元エントリーで記しているとおり、実験サイトではIEで画像枠（= padding プロパティ）がついていたのですが、エントリー時には画像枠がつかない状態になっていました。そのことについてあまり気にしていなかったのですが、先日この件に関するご質問を頂いて調べたところ、原因が判明しました。
おおざっぱな結論から申し上げますと、テンプレート1行目にあるXML宣言
が画像枠の表示に影響しています。当サイトでは1行目にXML宣言を記述しているため、実験サイト（XML宣言なし）と異なる結果になっていました。
表示の違いについては以下のサンプルでご確認ください。
XML宣言あり／XML宣言なし
XML宣言が影響する原因は、下記の2点です。
1. XML宣言が記述されている場合に「後方互換モード」になる
2. IE6 の後方互換モード（および5.5以前）の場合、img 要素に padding プロパティが有効にならない
以下、順を追って説明します。
概要（標準準拠モードと後方互換モード・DOCTYPE宣言）
IEやMozilla 等のブラウザには、CSSに準拠してHTMLを表示するモードを「標準準拠モード」と、古い形式でマークアップされたHTMLに対応するための「後方互換モード」に対応しています。どちらのモードで表示されるかについては、以下のような DOCTYPE 宣言（文書型宣言）に依存します。
標準準拠モードと後方互換モード、および DOCTYPE 宣言の種類等については下記に詳細な説明があります。
今すぐ調べる！ホームページ作成リファレンス：標準モードと互換モードについて
カスタムチャンス! 雑記帖：文書型宣言とブラウザの表示モード
XML宣言が記述されている場合に「後方互換モード」になる
1番目の原因で、IE6 では DOCTYPE 宣言を1行目（先頭）に書かないと、必ず「後方互換モード」として解釈されてしまうバグが存在します。つまり1行目にXML宣言が記述されているとこのバグが発生します。
カッコ書きで「先頭」と明記しているのは、同じ行の前にXML宣言を記述しても後方互換モードとして解釈されるためです。
Lucky bag::blog：xml宣言について
後方互換モードで img 要素の padding プロパティが有効にならない
そして2番目の原因として、IE6 の後方互換モードでは img 要素の padding プロパティが有効にならないというバグがあります。標準準拠モードでは問題なく表示されます。
CSSバグリスト＠CSSバグ辞典スレッド：img要素にパディングが効かない
このような経緯で、マークアップ1行目のXML宣言によって「画像枠が表示されない」という問題が発生します。
まとめ
IEで画像枠（padding）を表示するためには、下記の条件を満たしている必要があります。
1. 1行目の先頭に DOCTYPE 宣言がある
2. 標準準拠モードが有効になるDOCTYPE 宣言が記述されている
2番目の「標準準拠モードが有効になるDOCTYPE 宣言が記述されている」の意味は、DOCTYPE宣言を1行目の先頭に記述しても、宣言内容によっては後方互換モードとして解釈される場合があります。
下記の DOCTYPE 宣言では標準準拠モードとして解釈され、画像枠が表示されることを確認しています。
HTML 4.01 Strict DTD
HTML 4.01 Frameset DTD（URLあり）
HTML 4.01 Tranditional DTD（URLあり）
DOCTYPE宣言と標準準拠モード対応について
2番目にある「標準準拠モードが有効になるDOCTYPE 宣言が記述されている」ですが、DOCTYPE宣言と標準モードの対応状況については Microsoft の下記のサイトに掲載されています。
MSDN Online：Internet Explorer 6 における CSS の拡張の !DOCTYPEの例
該当部分を引用させて頂くと下記の通りです。
Label Definition URLあり URLなし
HTML 4.0 指定なし 有効 有効
HTML 4.0 Frameset 有効 無効
HTML 4.0 Transitional 有効 無効
HTML 4.0 Strict 有効 有効
XHTML 有効 有効
一覧の「Label / Definition / URL あり / URLあり」の組み合わせで有効（=標準準拠モード）・無効（後方互換モード）が決まります。例えば「HTML 4.01 Transitional」については「URLあり」の場合のみ有効になることがお分かりになると思います。
XHTMLについてはXML宣言を削除すれば有効になります。
*1 スクリーンショットは完成イメージです。
Posted by yujiro
« ニンテンドー | Main | 検索結果画面の日本語を変更する »
この記事を読んだ人はこんな記事も読んでいます
* 検索結果画面の日本語を変更する
* CSSで画像に影をつける（ドロップシャドウ）
* リキッドレイアウトの背景色を変更する
* CSSでブロックレベル要素をセンタリングする
* IE7 の CSS ハック
* CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方
* CSSでブログに影をつける（ドロップシャドウ：Movable Type 4.x 配布テンプレート版）
* 固定3カラムのIE6・後方互換モード対処方法
* 234万5678アクセス特別企画
* CSSでブログに影をつける（ドロップシャドウ）
関連記事
* IE7 で pre 要素が適正に表示されない不具合を修正
* CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする
* CSS でヘッダーに画像を表示する for Movable Type 4
* CSSでブログに影をつける（ドロップシャドウ：Movable Type 4.x 配布テンプレート版）
* Highslide JS でサムネイル画像を拡大表示する（設定方法の変更）
* CSS でブログ本文の画像だけをセンタリングする
* CSS の画像置換で画像にリンクを設定する
* XREA のバナー広告を固定レイアウトのヘッダに表示する
* グローバルナビゲーション（その1：基本スタイル）
* 「追記文章の折りたたみ 2.0」でIE7の不具合を解消する
* サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する
* 公開テンプレートにフッタを追加する（2カラム版）
* CSS の after 擬似要素で回り込みを解除する
* テンプレートカスタマイズ支援ツール Column Resizer
* サイドバーのタイトル背景をカラム幅にあわせて表示する
* 公開テンプレートのサイドバーのカラム幅を変更する
* CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方
* CSSでブログに影をつける（ドロップシャドウ）
* IE7 の CSS ハック
* CSSでブロックレベル要素をセンタリングする
