はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

XML宣言でIE6が後方互換モードになるバグ

2007/06/07 Thu [Edit]

先日、当ブログで制作したテンプレートをご使用中の方から不具合報告を受け、その方とのコメントのやりとりから有益な情報を頂きました。

既にご存知の方も多いと思いますが、XHTML の文章型宣言である XML 宣言をソースの一番上の先頭に記述すると、IE6 では後方互換モードになってしまうバグがあります。FC2ブログのソースで言うと下のようなソースです。

<?xml version="1.0" encoding="EUC-JP"?>

私のように知らなかった方のために説明させて頂くと、後方互換モードとは、IE6 より古いバージョンの IE での CSS の解釈(後方互換モード)となり、W3C の標準仕様に従って表示するモード(標準準拠モード)とは違う CSS の解釈をします。

したがって、他のモダンブラウザと IE6 に表示のズレが発生します。

  1. ボックスモデルの解釈の違い
  2. img 要素の padding プロパティが効かない
  3. margin プロパティの auto が効かない
  4. text-align プロパティによるブロックレベル要素への適用結果の違い
  5. 標準的なフォントサイズの違い

上記したものが、主な違いです。

それでは1つずつ詳細を説明します。

まず「ボックスモデルの解釈の違い」ですが、下の図をご覧ください。

ボックスモデル

標準準拠モードだと、width プロパティや height プロパティでブロックレベル要素の大きさを指定した時、その数値が内容(要素)の大きさとなり、その回りに padding や border 、margin などが指定されると内容の大きさに足されて行きます。

しかし、後方互換モードではブロックレベル要素の大きさを指定すると、padding と border も含まれます。もし、width : 400px とし、border : 10px とすると、内容は border の指定値を引いた 380px となります。padding : 10px でも内容は 380px です。
つまり、後方互換モードではブロックレベル要素に border と padding を指定すると内容は小さくなって行きます。

次に「 img 要素の padding プロパティが効かない」ですが、HTMLの img 要素に padding の指定値が反映されません。たとえば下のようにCSSを定義したとします。


img.hajime {
	padding : 10px;
	border : 1px solid black;
	background-color : white;
}

標準準拠モードで上のように指定すると画像データ( img 要素)の回りに padding : 10px の余白ができ、その結果背景色の白が表示され、更にその回りに border : 1px solid black が表示されるのですが、後方互換モードでは paddin : 10px が無視されるので、その結果画像データの回りに border が表示されます。 つまり画像の回りに背景色を表示させられません。

display プロパティの block などを試しましたが、何も変化がありませんでした。

続いて「 margin プロパティの auto が効かない」ですが、ボックスレイアウトのセンタリングなどで使用する auto が効きません。
しかしその次の「 text-align プロパティによるブロックレベル要素への適用結果の違い」を利用してボックスレイアウトのセンタリングは可能です。

標準準拠モードでは text-align はインライン要素にしか適用されないのですが、後方互換モードではブロックレベル要素にも適用されます。つまり text-align : center を使うことで IE6 を含む古い IE のボックスレイアウトのセンタリングが実現されます。

最後に「標準的なフォントサイズの違い」ですが、標準準拠モードでは標準フォントが medium なのに対し後方互換モードでは small と1段階小さくなります。

私は先月迄上記したことを感覚的にしか知らず、ハックやら div タグを駆使して対応していました。たとえばボックスの横(左右)に border や padding を指定する際は、border と padding 用の div を用意したり、border は背景画像を使用したりと言った感じです。ボックスの縦(上下)は横ほど神経を使っていませんでしたが IE6 を最優先してレイアウトの微調整をしたこともあります。

<?xml version="1.0" encoding="EUC-JP"?>

上の1行をソースから消し下のソースのような標準準拠モードになる DOCTYPE 宣言がソースの先頭にくるようにすれば IE6 もあそこ迄私を苦しめなかったのか・・・と複雑な思いを感じました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

しかし、よくよく考えて見ると、より多くのブラウザで似たような表示結果を心がけるなら、後方互換モードと言う足枷は結果的に良かったようにも思えます。 確認作業はしていませんが IE6 以前の IE でも似たように表示されているはずです。

ちなみに IE7 では XML 宣言をソースの先頭に記述しても標準準拠モードになります。また、XML 宣言がなくても IE6 以外のモダンブラウザは標準準拠モードで表示されます。

しかし W3C では XHTML 文書の文字コードが UTF-8 もしくは UTF-16 ではない場合は XML 宣言が必須としています。

逆に言うなら UTF-8 と UTF-16 の時は省略可能のようですが、FC2ブログ は文字コードが EUC-JP なので、今後のテンプレート制作ではどうしたものか?と考えたのですが、現状維持で行こうと思います。
W3C の言うことを守り、後方互換モードの IE6 にも対応するという姿勢です。

今回 IE6 のバグの根本に直面できたように思えます。結果的には FC2ブログのテンプレート制作に関しては大きな変化はありませんが、感覚的に分かっていたことが頭の中でしっかり整理できたのは大きな収穫だったと思います。

タロさんどうもありがとうございました!

Prev
IEハック(アンダースコア・ハック)
Top
はじめてのブログデザイン
Next
写真・画像を格好良く見せる JavaScript

Comments

勉強させていただいてます

私も今までぼんやりと困っていたことに詳しいご説明をいただき、ホントにありがとうございます。

先日FC2に引っ越してきたとき、テンプレートの多彩さに
「うわ~よりどりみどりのデザイナーズマンションみたいだ~」
とウキウキ小躍りしながら選ばせていただきました。

ところが消費者というのは何て我がままなのでしょう。
「あと、画像にpaddingさえきけば・・・」
なんて細かい我がままを、ここまで昇華していただけるなんてかたじけない思いです。
でもこの解説は嬉しい(どっちやねん)

うちのブログはテキスト主体なので、hajimeさんのテンプレがホントに使い心地も見心地もいいです。
どうかこのまま現状維持でいらしてください。
あんまりデザインはコロコロ変えない方針なので、もうしばらくお世話になります。
<(_ _)>

タロさんこんにちは!

いえいえ、こちらこそありがとうございます。
タロさんの御陰で頭の中が整理できました。

>デザイナーズマンション

そうですね^^
私もFC2のテンプレートの多彩さに驚かされ、胸を躍らせた一人です。なので、そんな中から私の作ったモノをご使用頂けると、本当に光栄な事だと思います。ありがとうございます。

わがままなんてとんでもない!
不具合報告して頂き、貴重なご意見まで聞かせて頂けたと感謝しています。また何かお気づきの点などありましたら、お聞かせ頂けると嬉しいです^^

>現状維持で

優しいお言葉ありがとうございます。XML宣言に関しては現状維持しつつ、タロさんのお言葉を胸にこれからも私なりに精進して行きたいと思います。

>もうしばらくお世話になります

ありがとうございます。是非、お使いください♪
でも、飽きたら遠慮なく他の素敵なテンプレートに変更ください^^
その時に「あ!またあのおっさんのテンプレだ!」なんてなれるよう頑張ります!

コメントありがとうございます!

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。