標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する: 小粋空間

Top ＞ CSS ＞標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する

標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する

Posted at March 11,2006 1:55 AM
Tag：[CSS, DOCTYPE, Dropshadow, Image]

IEでドロップシャドウ画像に枠を表示する以前エントリーした「CSSで画像に影をつける（ドロップシャドウ）」で、IEで画像枠が表示されない不具合についての対処方法です。
対処することで、スクリーンショットのようにIEでも画像枠が表示されるようになります。*1

元エントリーで記しているとおり、実験サイトではIEで画像枠（= padding プロパティ）がついていたのですが、エントリー時には画像枠がつかない状態になっていました。そのことについてあまり気にしていなかったのですが、先日この件に関するご質問を頂いて調べたところ、原因が判明しました。

おおざっぱな結論から申し上げますと、テンプレート1行目にあるXML宣言

<?xml version="1.0" encoding="utf-8"?>

が画像枠の表示に影響しています。当サイトでは1行目にXML宣言を記述しているため、実験サイト（XML宣言なし）と異なる結果になっていました。
表示の違いについては以下のサンプルでご確認ください。

XML宣言あり／XML宣言なし

XML宣言が影響する原因は、下記の2点です。

XML宣言が記述されている場合に「後方互換モード」になる
IE6 の後方互換モード（および5.5以前）の場合、img 要素に padding プロパティが有効にならない

以下、順を追って説明します。

概要（標準準拠モードと後方互換モード・DOCTYPE宣言）

IEやMozilla 等のブラウザには、CSSに準拠してHTMLを表示するモードを「標準準拠モード」と、古い形式でマークアップされたHTMLに対応するための「後方互換モード」に対応しています。どちらのモードで表示されるかについては、以下のような DOCTYPE 宣言（文書型宣言）に依存します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

標準準拠モードと後方互換モード、および 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行目の先頭に DOCTYPE 宣言がある
標準準拠モードが有効になるDOCTYPE 宣言が記述されている

2番目の「標準準拠モードが有効になるDOCTYPE 宣言が記述されている」の意味は、DOCTYPE宣言を1行目の先頭に記述しても、宣言内容によっては後方互換モードとして解釈される場合があります。
下記の DOCTYPE 宣言では標準準拠モードとして解釈され、画像枠が表示されることを確認しています。

HTML 4.01 Strict DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

HTML 4.01 Frameset DTD（URLあり）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Tranditional DTD（URLあり）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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 このページの先頭に戻る

関連記事をもっと読む

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ ホームページ作成で気をつけること from ホームページ作成、アフィリエイト、アクセスアップで幸せです。
どうも。今日も元気にごちおです。今日はホームページ作成の際、気をつけることをリストにしました。商用ホームページを対象にしています。 ... [続きを読む]

Tracked on March 12, 2006 3:03 PM

≫ 写真に立体的な枠をつける from 波乗りーまん
写真をブログに載せても平べったく感じてたんで、なんだかなーって思ってました特... [続きを読む]

Tracked on April 2, 2006 1:28 AM

≫ 画像に影をつける from ♪poohな毎日♪
カスタマイズはほとんど終了して以前のエントリーで簡単に覚書を書きましたが、それ... [続きを読む]

Tracked on June 24, 2006 8:09 PM

≫ 画像にポラロイド風の飾り枠を設定しましょう（CSS編集） from yozoの気が向いたと記2.0
　せっかくの画像を記事に入れるのなら、ちょっと目立つように周りを飾ってみたくなりますよね♪ それでここの記事画像の枠線を設定しましょう（CSS編集）では... [続きを読む]

Tracked on November 15, 2006 6:15 PM

≫ XHTML+CSSでIEだと表示くずれが発生してしまう原因 from ID-Blogger
普段使っているブラウザはCSSの解釈が最も正しいと評価されているMozilla系の「FireFox」... [続きを読む]

Tracked on July 12, 2007 3:36 AM

≫ PukiWiki の DOCTYPE宣言 from
何故か IE で PukiWiki のページのみ表示が崩れると思ったら、えらいことを忘れていた。PukiWiki はデフォルトで XML 宣言を吐いていた... [続きを読む]

Tracked on February 19, 2008 8:20 AM

≫ DOCTYPE from GSTYLE Blog
前回出てきた<!DOCTYPE>について。 HTMLはまず「DTD」（Document Type Definition:... [続きを読む]

Tracked on June 24, 2008 12:49 PM

≫ ブラウザの表示モード（レンダリングモード） from creator's blog
多くのブラウザは、文書型宣言の書き方や文書型定義の種類によって表示モード（レン... [続きを読む]

Tracked on December 26, 2008 3:50 PM

先ほどからこの枠をつけるカスタマイズで苦戦しています。
枠自体はDOCTYPE 宣言を変更することにより表示できたのですが、
その代わりにCSSでの表示がおかしくなってしまいます。

具体的にはDOCTYPE 宣言を各種試してみたのですが、どうも１行目に
<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
がないと、タイトルやサイドメニュー、エントリーの背景がページ背景と同じ色になってしまいます。

ちなみにCSSはスタイルシート生成ページで作ったものです。
どうか、なにかわかることがあればご教授下さい。

[1] Posted by ships : May 4, 2006 4:55 AM

＞shipsさん
こんばんは。
ご質問の件ですが、文言だけでは解消できそうにありませんのでURLをご連絡頂けますでしょうか。URLを入力してコメントを再投稿されるか、公開されたくない場合はプロフィールのメールフォームでご連絡ください。
それではよろしくお願い致します。

[2] Posted by yujiro : May 8, 2006 10:01 PM

レスありがとうございます。
こんな感じです。TOP以外はDOCTYPE 宣言を変更していないので、意図した色で表示されているのですが・・・。

同時に質問なんですが、dropshadowのズレも上手く直らない状態です。
.shadow セレクタにmagrinを追加して修正しているのですがこれではshadowも一緒に動いてしまって・・・。

色々調整している所ですが、お時間があればお手数ですが助言頂けると大変助かります。
よろしくお願いいたします。

[3] Posted by ships : May 8, 2006 11:44 PM

＞shipsさん
こんにちは。
XML宣言は

・必ず1行目の先頭に記述（2行目以降への記述は禁止）
・記述しない

のいずれかです（言及していませんが暗黙の了解となっています）。
http://www.atmarkit.co.jp/aig/01xml/declaration.html

したがってDOCTYPE宣言の下にあるXML宣言は1行目に記述するか、削除してください。
これが不具合の原因かどうか定かではありませんが、まずはこの点を修正してください。
それではよろしくお願い致します。

[4] Posted by yujiro : May 10, 2006 1:16 PM

こんばんは。お世話になってます。

早速修正してみましたが、やはりダメでした。
DOCTYPE宣言は以下のlinkを参考に全て試してみましたが、何れも　CSSの配色が崩れるが枠は付く　or　枠は付かないがCSSは正常　という結果になってしまいます。

http://html.dspt.net/mode.html
何も無し　CSS：O　枠：X
HTML4.01Strict　CSS：X　枠：O
HTML4.01Strict URI　CSS：X　枠：O
HTML4.01Tranditional　CSS：O　枠：X
HTML4.01Tranditional URI　CSS：X　枠：O
XHTML1.1　CSS：X　枠：O

まだ作りたてで変な編集をしたとも思えないのですが・・何かわかりますでしょうか？よろしくお願いいたします。

[5] Posted by ships : May 10, 2006 8:07 PM

＞shipsさん
こんばんは。
スタイルシートを拝見させて頂いたところ、配色の設定で「#」が付与されていない箇所がありました。
再度スタイルシート生成ツールで設定されるか、まずは公開テンプレートのスタイルシートをご利用して頂けますでしょうか。
それではどうぞよろしくお願い致します。

[6] Posted by yujiro : May 12, 2006 12:22 AM

こんばんは、ご迷惑かけました！
おかげで上手く表示されるようになりました。
ありがとうございます。

[7] Posted by ships : May 12, 2006 10:36 PM

＞shipsさん
こんばんは。
ご連絡ありがとうございました。
無事に表示されてよかったです。
ではでは！

[8] Posted by yujiro : May 13, 2006 1:23 AM

yujiroさんこんにちは♪
今回MT復活させるにあたって、毎度のことですけど大変お世話になりました。
数が多すぎて（笑）ひとつひとつにお礼のコメントが書けませんでしたので、ここでお礼を言わせていただきます。
ありがとうございましたm(_ _"m)ペコリ

さて、今回3.2にした後画像に枠が私のもつかなくなっていました。
確かサイトでエントリーがあったと思い出してここにたどりつきました。
確かに3.1の時と１行目の記述が違っていますね。
これが枠が出なかった原因だったのですね。
XML宣言を削除してDOCTYPE宣言を１行目に変更してみましたら、ちゃんと枠が表示されるようになりました。
Blogの表示自体は崩れていないと思うのですが、どうでしょうか。
むずかしいことはよくわからないので（苦笑）方法はこれであっているのかどうかは不安ですけど。
とりあえず原因がわかって一安心です。

[9] Posted by し?ちゃん : May 28, 2006 5:02 PM

＞し?ちゃんさん
こんにちは。
記事参照ありがとうございます。
表示は崩れずに正常に表示されています。
ではでは！

[10] Posted by yujiro : May 30, 2006 11:30 AM

yujiroさん、こんばんはー♪
IE6のimgタグでpaddingがどうして効かないのだろうって思って調べていたら、yujiroさんちにたどりつきました。恥ずかしながら、バグとは知りませんでした。(ﾟｰﾟ;Aｱｾｱｾ　
　yozoはお借りしているテンプレートの一行目のXML宣言を削除するわけにもいかないので、divのclassで設定するようにしました。いつものことですが、勉強になりました。ありがとーございまっす♪　　
　また勝手ながらトラバ入れさせていただきました。めちゃくちゃお暇なときにでも見てやってくださいませ。m(_ _)m　　　　　押しかけ弟子より

[11] Posted by yozo : November 15, 2006 6:27 PM

＞yozoさん
こんにちは。
コメント＆トラックバックありがとうございました。
ではでは！

[12] Posted by yujiro : November 16, 2006 5:00 PM

＞IE6 では DOCTYPE 宣言を1行目（先頭）に書かないと、必ず「後方互換モード」として解釈されてしまうバグが存在します。

私は今、HTML → XHTML にホームページを移行しています。
で、解決できない問題と葛藤していましたが、
この一文に救われました。。。
いやぁ、しっかりしてくれよMicrosoft ってかんじですね。。

[13] Posted by 通りすがりの者です : February 16, 2008 9:24 PM

＞通りすがりの者ですさん
こんばんは。
コメントありがとうございました。
お役に立てたようでよかったです。
ではでは！

[14] Posted by yujiro

: February 17, 2008 1:23 AM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

Now loading...

小粋空間 - a cheap joke and a play on words site