IEとFirefoxの表示の差・再び
2007年06月23日01:49
デザインを変更したのですが、IE（いまだに６）とFirefoxの表示が出て困っていました。
なんか解決法は無いかとまた、試行錯誤していたら、なんとなく自分なりの解決法？が一部わかったような気がしたので、覚え書き
として書いておきたいと思います。

以前の苦しんでいた記事はこちら。
IEとFirefoxの表示の差



１．DOCTYPEの宣言文

まず、この話の一番大事なことは「DOCTYPEの宣言文」です。
前回の記事のコメント欄でご親切に指摘してくださった方がいて、この「DOCTYPEの宣言文」なるものの存在を知ったのですが、なにぶんそれが何なのか、どうなのか、どないやっちゅうねん、という事がまるでわからずにいました。

この宣言文、サイトのHTMLなどの冒頭に書いて、そのサイトがどういうDOCTYPEなのかをブラウザに知らしめます。
そして、ブラウザがどういう挙動をするか、が決まるのです。
ブラウザの挙動は大きく分けて、2種類。互換モードか標準モードか。
この2種類、めちゃくちゃ表示が違います。どれだけ違うかは後ほど説明します。

まずは私に関連するHTMLのDOCTYPEを見てみましょう。


＜livedoorBlog＞
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

すべてのlivedoorBlogのデザインがこの宣言文かどうか確認していませんが、とりあえず今選択しているデザインの宣言文です。　
こっ、これは・・・！
XHTML 1.0 Transitionalの中でも、IE6のみ互換モード、他は標準モードというあまのじゃくな宣言文。

以前livedoorBlogはDOCTYPEの宣言文が無かったのです。
知らないうちにDOCTYPEの宣言文がつくようになっていたのですが、これでは無いのと一緒の挙動ですね。
宣言文が無い場合、IE6は、互換モードになってしまいます。


＜ホームページビルダー１１＞
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ほとんど全て互換モード、という宣言文です。
ホームページを作ったことが無いので、よくわかりませんが、全部互換モードで統一されるなら、ブラウザによる表示の差は出ないのでしょうか。


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

私のMovable Typeはバージョン3.2以降のバージョンアップしてないのですが、バージョン3.2では、この宣言文。
ほとんど全て標準モードです。ですが、これでもIE6とFirefoxの差は微妙にあったような気が。


＜Movable Type公式サイト＞
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

この宣言文、IE6のみ互換モードです。



２．互換モードと標準モードの違い

いろいろ違うようなのですが、いつも一番苦しむのは、paddingとmarginの解釈の違いです。
簡単に説明します。

互換モード・・・おにぎりの本体は「おにぎり」
標準モード・・・おにぎりの本体は「うめぼし」

ということです。わかりにくいので、図で説明します。



CSSの中で、ある要素に横幅をつけるとします。
この横幅をおにぎりに例えると、互換モード、標準モードに「おにぎりはどこまでですか?」と聞くと答えが違うのです。
互換モードは内容（うめぼし）、padding（ご飯）、border（のり）まで含めた部分をおにぎりと言い、ここまでに横幅を設定します。
ところが、標準モードは内容（うめぼし）だけがおにぎりだ！と言い、ここに横幅を設定してしまうのです。
標準モード、やれやれ・・・な頑固者です。
初心者の心情的には、のりまでがおにぎり、と言う互換モードにシンパシーを感じ、CSSの設定的にもわかりやすいのですが、標準モードの心情も理解しないとなりません。つらいところです。

これだけ解釈に違いがありますので、
互換モードと標準モードが切り替わるDOCTYPE宣言文のもと、paddingやborderをバンバン使えば、それは表示が崩れます。
思えば、これが理解できずに苦しんでいたようです。


３．両者のすりよせ

以前苦しんでいた頃には、標準モードを互換モードにすりよせる魔法のタグについて書いておりましたが、どうしても使えずにいました。
と言うのも、それを使わずに両者の差が無いようなサイトデザインを作れないかと思っていたのです。
どこをどうすれば差がなくなるのか理解してデザインをしていけば、互換モードだろうが標準モードだろうが問題ないサイトが作れるはずですから。

どうやら、ここは互換モードに泣いてもらって、padding（ご飯）、border（のり）無しのおにぎりを渡せば、標準モードと同じく、内容（うめぼし）だけがおにぎりだ！と言ってくれるはずです。

class「rap」と、class「umebosi」を準備して、rapの中にumebosiが浮かぶような構図にできないかと試行錯誤してみました。
これができれば、表示が崩れないCSSの指定方法がわかります。


＜パターン1・CSSとHTML＞
−−−−−−−−−−−−−−−
.rap{
width:300px;
height:50px;
padding:0px;
margin:0px;
background:#cccccc;
}
.umebosi{
width:200px;
height:30px;
padding:0px;
margin:10px 80px 10px 20px;
background:#ff0000;
}
−−−−−−−−−−−−−−−
<div class="rap">
<div class="umebosi">
</div>
</div>
−−−−−−−−−−−−−−−

表示結果


内容のclass="umebosi"に、paddingとborderを指定しなければ、横幅は意図した結果を出せたのですが、なぜか縦幅の方が言うことを聞いてくれません。
しょうがないので、いろいろ試行錯誤し、rapの中にもう一個、rap-innnerを入れて、そのmarginで指定したらどうだろう？とやってみましたが、これも撃沈。
それなら、横幅はclass「rap-inner」のmargin、縦幅はclass「rap-inner」のpaddingで指定してはどうでしょうか？


＜パターン２・CSSとHTML＞
−−−−−−−−−−−−−−−
.rap{
width:300px;
height:50px;
padding:0px;
margin:0px;
background:#cccccc;
}
.rap-inner{
padding:10px 0px 10px 0px;
margin:0px 80px 0px 20px;
}
.umebosi{
width:200px;
height:30px;
padding:0px;
margin:0px;
background:#ff0000;
}
−−−−−−−−−−−−−−−
<div class="rap">
<div class="rap-inner">
<div class="umebosi">
</div>
</div>
</div>
−−−−−−−−−−−−−−−
表示結果


なんか知らんが、でけた・・・。

これを利用して、rapに背景画像を使い、ｆｕｔａ、sokoという要素を加えそれにも背景画像をつけると、
umebosiを囲うことができました。


＜パターン２・CSSとHTML＞
−−−−−−−−−−−−−−−
.futa{
width:300px;
height:30px;
padding:0px;
marfin:0px;
background:url(futa.gif);
}
.rap{
width:300px;
height:50px;
padding:0px;
margin:0px;
background:url(image.gif);
background-repeat:repeat-y;
}
.rap-inner{
padding:10px 0px 10px 0px;
margin:0px 80px 0px 20px;
}
.umebosi{
width:200px;
height:30px;
padding:0px;
margin:0px;
background:#ff0000;
}
.soko{
width:300px;
height:30px;
padding:0px;
background:url(soko.gif);
background-repeat:no-repeat;
}

−−−−−−−−−−−−−−−
<div class="futa"></div>
<div class="rap">
<div class="rap-inner">
<div class="umebosi">
</div>
</div>
</div>
<div class="soko"></div>

−−−−−−−−−−−−−−−



何故縦幅だけpaddingなのか良くわかりませんが、とりあえず、自分ではこれを参考にサイトのデザインをつめていきたいと思います。

そう言えばIE7とIE6の表示の差あるんだろうか？




関連記事：
・FirefoxとIEのfontの表示の差
・DOCTYPE スイッチと表示の差



│clip! │FireFox 
このBlogのトップへ │前の記事 │次の記事

この記事へのコメント
モアロマ
モアロマ
2007年06月23日 23:02
5

afiliateさ〜ん♪afiliateさ〜ん♪
こんばんは。
＞そう言えばIE7とIE6の表示の差あるんだろうか？
はい。あります。

個人的な感想は、IE7はFirefoxに近いです。
IE7はFirefox程、marginとpaddingを厳密に解釈しないように思います。あとは文字の大きさとか。

でも、全く同じではないので、そこがまた悩みのタネです。
Firefoxで完璧でも、IE7で見ると、微妙な隙間ができるとか。
CSSを対峙するときは電卓片手に戦ってます。

もともとはIE6派（どんな派閥だよ）だったのですが、PCの調子が悪くなってIE6の再インストールを試みるも挫折。で、仕方なくIE7を使ってますが、慣れると快適です。

私のPCではIE6での表示を見ることが出来ないので、私のサイトIE7やFirefoxでOKでも、IE6で見たら崩れてる部分とかあるんだろうな・・・＞＜

モアロマ
モアロマ
2007年06月23日 23:05
で、続きです。（長くてすみません）


余計なお世話だとは思いますが、IE7で見た、このサイトさんの表示は完璧です＾＾

もし、小姑の様に、もの凄く細かいことを言えば、TOPページの商品が4個並んでいるところのソニースタイルの文章の最後の「提携はリンクシェアで。」が下のオレンジの線に若干かかっています。「楽しめる“mylo（マイロ）”。」の後ろに<br>があるならそれを消すと、Firefox同じ見え方だと思います。
あの、でも、もの凄く、細かいことですから・・・

IE7とFirefoxでは文字の大きさが違うように思います。Firefoxの方が小さいです。12ｐｘとかだと、「なんとなく違う？」ってカンジですが、9px等の小さい文字は全然違います。
afiliate
2007年06月23日 23:59
どおもです〜モアロマさま。
詳しい情報をありがとうございます。

なるほど、IE７はFirefoxに近い表示ですか。
もうしばらくIE６＆Firefoxで確認していたほうがいいかなあ。

で、微妙に違うとなると、これまた厄介ですね（＾＾；

とにかくpadding、margin、borderは極力使わず・・どないせいっちゅうねん、
というところでしょうか（笑）。
afiliate
2007年06月24日 00:09
このサイトのデザインの出来がいい部分は、元のデザインをいじってないところです（笑）。
で、微妙に表示が崩れているところは、
私が手を加えてる場所だったり（＾＾；

それはおいといて、一部互換の標準準拠モードとやらがあるらしく、Firefoxがそれらしいです。表やセンタリングなど一部過去互換維持らしいです。
このサイトの表示は、ひょっとしたら、
IE７・・・標準モード
IE６・・・互換モード
Firefox・・・一部互換標準モード
なのかも知れませんね。もう少しいろいろ試行錯誤してみます。
教えてくださって、ありがとうございました〜（＾O＾）／




この記事へのトラックバック


1. Internet Explorer 7  [ snuffkinのゴルフ日記 ]   2007年06月23日 11:40

この度、話題になってる Internet Explorer 7（XP SP2版）を私も導入してみようと、遅ればせながらDLしてみました。何だか昔のナローバンドでのブラウザ更新の感覚が残っているので、５分とかからない・・・