エントリー本文
標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する
元エントリーで記しているとおり、実験サイトではIEで画像枠（= padding プロパティ）がついていたのですが、エントリー時には画像枠がつかない状態になっていました。そのことについてあまり気にしていなかったのですが、先日この件に関するご質問を頂いて調べたところ、原因が判明しました。 おおざっぱな結論から申し上げますと、テンプレート1行目にあるXML宣言 |
以前エントリーした「<?xml version="1.0" encoding="utf-8"?>が画像枠の表示に影響しています。当サイトでは1行目に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宣言を記述しても後方互換モードとして解釈されるためです。
後方互換モードで img 要素の padding プロパティが有効にならない
そして2番目の原因として、IE6 の後方互換モードでは img 要素の padding プロパティが有効にならないというバグがあります。標準準拠モードでは問題なく表示されます。
このような経緯で、マークアップ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 スクリーンショットは完成イメージです。
≫ ホームページ作成で気をつけること from ホームページ作成、アフィリエイト、アクセスアップで幸せです。
どうも。今日も元気にごちおです。
今日はホームページ作成の際、気をつけることをリストにしました。
商用ホームページを対象にしています。
... [続きを読む]
≫ 写真に立体的な枠をつける from 波乗りーまん
写真をブログに載せても平べったく感じてたんで、 なんだかなーって思ってました 特... [続きを読む]
≫ 画像に影をつける from ♪poohな毎日♪
カスタマイズはほとんど終了して以前のエントリーで簡単に覚書を書きましたが、それ... [続きを読む]
≫ 画像にポラロイド風の飾り枠を設定しましょう（CSS編集） from yozoの気が向いたと記2.0
せっかくの画像を記事に入れるのなら、ちょっと目立つように周りを飾ってみたくなりますよね♪
それでここの記事画像の枠線を設定しましょう（CSS編集）では... [続きを読む]
≫ XHTML+CSSでIEだと表示くずれが発生してしまう原因 from ID-Blogger
普段使っているブラウザはCSSの解釈が最も正しいと評価されているMozilla系の「FireFox」... [続きを読む]
≫ PukiWiki の DOCTYPE宣言 from
何故か IE で PukiWiki のページのみ表示が崩れると思ったら、えらいことを忘れていた。PukiWiki はデフォルトで XML 宣言を吐いていた... [続きを読む]
≫ DOCTYPE from GSTYLE Blog
前回出てきた<!DOCTYPE>について。
HTMLはまず「DTD」（Document Type Definition:... [続きを読む]
≫ ブラウザの表示モード（レンダリングモード） from creator's blog
多くのブラウザは、文書型宣言の書き方や文書型定義の種類によって表示モード（レン... [続きを読む]
先ほどからこの枠をつけるカスタマイズで苦戦しています。
枠自体はDOCTYPE 宣言を変更することにより表示できたのですが、
その代わりにCSSでの表示がおかしくなってしまいます。
具体的にはDOCTYPE 宣言を各種試してみたのですが、どうも１行目に
<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
がないと、タイトルやサイドメニュー、エントリーの背景がページ背景と同じ色になってしまいます。
ちなみにCSSはスタイルシート生成ページで作ったものです。
どうか、なにかわかることがあればご教授下さい。
＞shipsさん
こんばんは。
ご質問の件ですが、文言だけでは解消できそうにありませんのでURLをご連絡頂けますでしょうか。URLを入力してコメントを再投稿されるか、公開されたくない場合はプロフィールのメールフォームでご連絡ください。
それではよろしくお願い致します。
レスありがとうございます。
こんな感じです。TOP以外はDOCTYPE 宣言を変更していないので、意図した色で表示されているのですが・・・。
同時に質問なんですが、dropshadowのズレも上手く直らない状態です。
.shadow セレクタにmagrinを追加して修正しているのですがこれではshadowも一緒に動いてしまって・・・。
色々調整している所ですが、お時間があればお手数ですが助言頂けると大変助かります。
よろしくお願いいたします。
＞shipsさん
こんにちは。
XML宣言は
・必ず1行目の先頭に記述（2行目以降への記述は禁止）
・記述しない
のいずれかです（言及していませんが暗黙の了解となっています）。
http://www.atmarkit.co.jp/aig/01xml/declaration.html
したがってDOCTYPE宣言の下にあるXML宣言は1行目に記述するか、削除してください。
これが不具合の原因かどうか定かではありませんが、まずはこの点を修正してください。
それではよろしくお願い致します。
こんばんは。お世話になってます。
早速修正してみましたが、やはりダメでした。
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
まだ作りたてで変な編集をしたとも思えないのですが・・何かわかりますでしょうか？よろしくお願いいたします。
＞shipsさん
こんばんは。
スタイルシートを拝見させて頂いたところ、配色の設定で「#」が付与されていない箇所がありました。
再度スタイルシート生成ツールで設定されるか、まずは公開テンプレートのスタイルシートをご利用して頂けますでしょうか。
それではどうぞよろしくお願い致します。
yujiroさんこんにちは♪
今回MT復活させるにあたって、毎度のことですけど大変お世話になりました。
数が多すぎて（笑）ひとつひとつにお礼のコメントが書けませんでしたので、ここでお礼を言わせていただきます。
ありがとうございましたm(_ _"m)ペコリ
さて、今回3.2にした後画像に枠が私のもつかなくなっていました。
確かサイトでエントリーがあったと思い出してここにたどりつきました。
確かに3.1の時と１行目の記述が違っていますね。
これが枠が出なかった原因だったのですね。
XML宣言を削除してDOCTYPE宣言を１行目に変更してみましたら、ちゃんと枠が表示されるようになりました。
Blogの表示自体は崩れていないと思うのですが、どうでしょうか。
むずかしいことはよくわからないので（苦笑）方法はこれであっているのかどうかは不安ですけど。
とりあえず原因がわかって一安心です。
＞し?ちゃんさん
こんにちは。
記事参照ありがとうございます。
表示は崩れずに正常に表示されています。
ではでは！
yujiroさん、こんばんはー♪
IE6のimgタグでpaddingがどうして効かないのだろうって思って調べていたら、yujiroさんちにたどりつきました。恥ずかしながら、バグとは知りませんでした。(ﾟｰﾟ;Aｱｾｱｾ
yozoはお借りしているテンプレートの一行目のXML宣言を削除するわけにもいかないので、divのclassで設定するようにしました。いつものことですが、勉強になりました。ありがとーございまっす♪
また勝手ながらトラバ入れさせていただきました。めちゃくちゃお暇なときにでも見てやってくださいませ。m(_ _)m 押しかけ弟子より
＞IE6 では DOCTYPE 宣言を1行目（先頭）に書かないと、必ず「後方互換モード」として解釈されてしまうバグが存在します。
私は今、HTML → XHTML にホームページを移行しています。
で、解決できない問題と葛藤していましたが、
この一文に救われました。。。
いやぁ、しっかりしてくれよMicrosoft ってかんじですね。。
: February 17, 2008 1:23 AM
