標準準拠モードと後方互換モード・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点です。

  1. XML宣言が記述されている場合に「後方互換モード」になる
  2. 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::blogxml宣言について

後方互換モードで 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

<!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 OnlineInternet Explorer 6 における CSS の拡張の !DOCTYPEの例

該当部分を引用させて頂くと下記の通りです。

LabelDefinitionURLありURLなし
HTML 4.0指定なし有効有効
HTML 4.0Frameset有効無効
HTML 4.0Transitional有効無効
HTML 4.0Strict有効有効
XHTML 有効有効

一覧の「Label / Definition / URL あり / URLあり」の組み合わせで有効(=標準準拠モード)・無効(後方互換モード)が決まります。例えば「HTML 4.01 Transitional」については「URLあり」の場合のみ有効になることがお分かりになると思います。
XHTMLについてはXML宣言を削除すれば有効になります。


*1 スクリーンショットは完成イメージです。

関連記事
トラックバック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
前回出てきた&lt;!DOCTYPE&gt;について。 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 宣言を各種試してみたのですが、どうも1行目に
<?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の時と1行目の記述が違っていますね。
これが枠が出なかった原因だったのですね。
XML宣言を削除してDOCTYPE宣言を1行目に変更してみましたら、ちゃんと枠が表示されるようになりました。
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 logo : February 17, 2008 1:23 AM
コメントする
greeting

*必須

*必須(非表示)


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

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

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

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