IEとFirefoxの表示の差
2005年11月29日03:34
予告しておりました「IEとFirefoxの表示の差」の話題、今回こそ、完結編です。

おわび：この現象はDOCTYPEスイッチでDTDの指定が行われていないライブドアブログ特有のものでした。Seesaaブログ、FC2ブログ、Movable Typeなど、DTDの指定が行われているブログでは、この記事に書いておりますIEでの表示は違ってきますので、全くあてにならない記事です。混乱させて申し訳ありませんでした。


追記記事：
・IEとFirefoxの表示の差・再び
・FirefoxとIEのfontの表示の差
・DOCTYPE スイッチと表示の差


以前から、IEとFirefoxの表示の差については、Firefoxをインストールした当初から悩まされてきた問題でした。特にFirefoxで表示がおかしい、表示が崩れる、などの問題が発生し、その都度対処してきました。

前々回記事「Firefoxラクダ地獄」でコメントをいただいたのが、前回記事（Firefox）と今回の記事を書くに至ったきっかけです。そのコメントにはこう書かれていました。

IEとFirefox（NN）の表示の差ですが、こちらのページが参考になるかと。

http://www.fromdfj.net/html/border2.html

細かい部分は、僕もまだ良くわかってないのですが、「ボックスモデルハック」というヤツで、最終的には、このページの下にある

* { box-sizing : border-box}
* { -moz-box-sizing : border-box}

という指定をCSSにブチ込んでやると、それだけで、キチンと表示されるようです



ご丁寧に私に見せてくださるためだけに新しいサイトを作られる、ということまでしてくださいました。本当にありがとうございました。確かにIEとFirefoxにほとんど差がない表示になっていました。
私は相変わらず、あほみたいな事をしていたな、と思いました（笑）。


今回教えていただいた「box-sizing」なのですが、ここではイメージ的に「魔法のタグ」と呼んでいきたいと思います。

教えていただいたサイトは、非常にわかりやすく詳しい説明のサイトで、私は「魔法のタグ」と、box計測方法なるものについてなんとなくはわかったんですが、実はそのページのタイトルでつまづいてしまいました。

IEとNNのBOXの計測方法の違いについて


なぜ、Firefoxではなく、NNなのか。そう考えると気になって進めなくなりました。
そういうわけで前回記事（Firefox）ができたわけです。
そして、NN6はMozillaから来ていてFirefoxもMozilla。うん、たぶんMozillaつながりなんだね、ということで納得しました。
違うのかもしれませんが（笑）、ある程度自分では納得がいったので、ようやく今回の記事を書き始めることとなりました。


前置きだけで終ってしまいそうな長さですが、いよいよ本題に入ります（笑）。



■IEとFirefoxの表示の違い■

１．フォントの表示の大きさが微妙に違う。

CSSでfont-sizeをxx-smallにしていると、Firefoxでは文字が小さくなりすぎ、特に日本語が読みづらくなります。

文字の差


.font1{font-size:xx-small;}
.font2{font-size:small;}
.font3{font-size:normal;}
.font4{font-size:large;}

.font5{font-size:10px;}
.font6{font-size:12px;}
.font7{font-size:14px;}
.font8{font-size:18px;}

.font9{font-size:80%;}
.font10{font-size:90%;}
.font11{font-size:100%;}
.font12{font-size:120%;}

とりあえずfont-size指定をpxやら、%指定に変えましょう。
px指定だとブラウザで文字の表示設定を中→大と変えても文字の大きさが変化しません。%指定だと文字の表示設定を大きくしている人には親切ですが、大きくなってサイトの表示がどこか崩れる可能性もあります。

xx-small以外で、お好きに指定してください。



２．borderに注意。

borderの差

この画像のFirefoxの方は、真ん中の枠線が表示されていませんよね。
でもCSSは同じなんです。なぜ表示されていないかわかりますか？


#content{
width:300px;
background:#CCCCFF;
border:solid 1px #000000;
}

.blog{
width:250px;
background:#FFCC99;
border:　solid 1px #000000;
}

.blogbody{
background:#FF99FF;
width:150px;
border:solid 1px #000000;
}

実は、クラス名「blog」の中のborderの前に全角スペースが入っています。IEは気にせず表示しますが、Firefoxはこれだけでborderが表示されません。ちょっぴりデリケートなやつです。


border認識の差

これもまたCSSは一緒です。

.blog{
width: 250px;
background:#FFCC99;
border:solid 10px #666666;
}

Firefoxの方が枠が広いのがおわかりになりますか？
IEはborderまでの幅を250pxとします。
Firefoxでは内容域、つまり中身を250pxとします。borderが両サイドに10pxあるわけですから、全体で270pxになります。

正しい解釈としては、中身を250pxとするらしいのですが、ぱっと見て初心者の感覚的には幅を指定してるんだから、ちゃんとその幅で収まってくれないと困る、という気がします。私のフィーリングはどちらかというとIEに近いかな、と。

この差が結局、IEとFirefoxの計測方法の大きな違いのひとつみたいです。

そして、この差を無くす（FirefoxをIEライクにあわせる）のが「魔法のタグ」というわけです。



３．paddingとかmarginとか解釈違いまくり。

いくつかのサイトを拝見して、かなり参考になりました。

・IEとNNのBOXの計測方法の違いについては、かなり丁寧で詳しい説明で、ものすごく参考になりました。


ですが、私の理解力では理解できない部分もありました。

たとえば、paddingより中身が小さい時はどのようにpaddingが反映されるか？とかです。その辺がよくわからんので、ブログの他の部品のCSSとHTMLをすべて削除し、いろいろパラメータを変えて実験してみました。


＝CSS･Ａ＝

CSSA

部品をただ並べてみました。「クラス名：blog」のパーツ（以下blog）を中心に見ていきます。
そして「大きさ」とはここではborderまで含めたパーツの横幅を指します。
IEにひいきした解釈となっています。
ほとんど同じに見えますが、もうすでにこの段階で微妙にblogの大きさは違います。
パーツに入れた文字の大きさは、18pxみたいです。


＝CSS･Ｂ＝

CSSB

調子に乗ってblogにpaddingを入れてみました。これでちょっとは影響を受けるはず・・・

・・・って、オイッ！影響受けすぎだっての！
Firefoxではblogがcontentからはみ出してます。どうしてこうなるの？
書いてある数字は、blogとblogbodyの内容域の距離です。

paddingは、上、右、下、左の順に指定されます。

IEの方は上が文字(18px)+padding（10px）=28px。下、左のpaddingもＯＫ。
どこかにしわ寄せが来なければいけないので、右が数合わせにされているみたいです。
blogの大きさからborderを引いた内容域に150pxのblogbodyがあるので、250-150-40-2＝58px。納得です。

Firefoxは、blogがなぜはみ出るのか理解できませんが好意的に解釈してみます。
blogとblogbodyの内容域の差100pxは保ちたい。左40px、右20pxのpaddingは入れたい。blogbodyは150pxである。それを全部足すと310pxなので内容域はそれを保とう。でもblogbodyにはborderの2pxがある。このしわ寄せは右によせとこう。
実際そう考えているのかは知りませんが、そんな感じなのでしょうか。なぜそう考えるかまったく理解できませんが。


＝CSS･Ｃ＝

CSSC

今度はさらにblogbodyを広げてみました。

IEはすべてのborderが正しく表示され、その分blogが広がっています。
Firefoxは、CSS・Ｂと同じ内容域を保つのが優先され、しわ寄せが右に行ってます。
Firefoxでの表示ははみ出していますが、まあ、割とIEとFirefoxの表示が近い感じがします。


＝CSS･Ｄ＝

CSSD

今度はblogbodyにmarginをつけてみました。IEではすべてのmarginが正しく表示され、blogがその分広がりました。
Firefoxではmarginでは外側の要素は広がらないようです。左のpaddingが優先され、右ははみ出しています。

　　

魔法のタグを使ってみる。


ではCSSに「魔法のタグ」を入れてみましょう。

* { box-sizing : border-box}
* { -moz-box-sizing : border-box}

期待に胸を膨らませ、いざ、全ページ再構築、と。


wizD

wizC


あれ？魔法のタグ、効いてない？

しかしよく見ると、Firefoxもborderまでで、パーツの大きさになっています。
ちゃんと効いているようですが、解釈が違う部分もあるようです。
魔法のタグだけで完璧というわけではないようです。


そして・・・

wizB


やった！ついにIEとFirefoxに表示の差が無くなった！


魔法のタグの効果はすごいですが、それだけに頼ってはいけないようです。
表示が崩れる可能性も考えておかないといけないようです。


何はともあれ、

魔法のタグ
* { box-sizing : border-box}
* { -moz-box-sizing : border-box}
の効果が実感できました。これは便利。


できればこれからも使えるといいのですが、今後このタグの扱いがどうなるかは流動的みたいです。

一応はこのタグに頼らなくても、レイアウトができるような力があったほうがいいかもしれません。



私の印象としては、padding、marginはとにかく極力使わない方がいいかな、と思いました。



Firefoxのシェアは今後も伸びる可能性があります。
時々はFirefoxでも、どういう風にサイトが見えているかをチェックしていくことが大事なようです。



おしまい。




追記:
文頭のおわびにも書きましたが、DOCTYPEスイッチというものがあって、これがどのように指定されているかによって、ブラウザによってCSSの解釈が違ってくるようです。

ライブドアブログにはこのDTD指定がありません。

Movable Typeには下記のように指定があります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
これを削除しちゃうと、今回の記事のような表示になってしまいます。

FC2ブログ、Seesaaブログ、楽天市場などには、このDTD指定はありました。
ですから、今回の記事は全く役に立ちません。


DOCTYPEスイッチについては、こちらでわかりやすくまとめてありましたので、ご参考になってください。

・CSS Dencitieさま。
■各UAのDOCTYPEスイッチについて


できればDTDを指定し標準準拠モードでサイトを確認して、表示の調整された方がよろしいかと思います。

しかし、例えばDTDを指定している場合、IE5.5には標準準拠モードが無いので、IE6.0とサイトの見え方が違うのかなあ、と思いました。ブラウザによってはサイトの見え方がいろいろ違う可能性があるな、と感じました。

知れば知るほどいろいろなことがあるなあと感じるとともに、自分の無知さをまた思い知りました。
コメントで今回の件をご指摘いただきましたiimuさま。本当にありがとうございました。重ねて御礼申し上げます。



Comments(6) │TrackBack(2) │clip! │FireFox  | ブログカスタマイズ
このBlogのトップへ │前の記事 │次の記事

この記事へのコメント
iimu
2005年11月29日 11:51
ブラウザの表示モードにはQuirks（奇癖）モードとStandard（標準）モードがあります。
IEとFirefoxの表示の違いは、Quirksモードでは、かなり大きくなっています。
よって、Standardモードにしてから調節するのがセオリーだと思います。
ただ、ほとんどのblogサービスは、そんなこと気にしていないのが、ほとんどですが:-(
Quirksモード・Standardモードについては、下記を参照。
http://www.mozilla.gr.jp/standards/webtips0014.html
Quirksモード・Standardモードの表示の違いについては、下記を参照。
http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_example.html

iimu
2005年11月29日 11:54
それと、この記事で取り上げている問題はStandardモードにするだけで解決します。と追記。

afiliate
2005年11月29日 14:04
どおも〜iimuさま。はじめまして。コメントありがとうございます。
そして、とても重要なことを教えていただき、ありがとうございます。

この記事、DTDが指定してあるサイトさまには全く意味の無い記事であることに気づきいて凹みつつも、これを教えていただかなかったら本当にあほなことを世界に向けて配信していたかと思うと、いくら感謝しても感謝してもし尽くせません。本当にありがとうございました。

afiliate
2005年11月29日 14:10
早速MovableTypeで同様の実験をしましたところ、borderに関してはＩＥ6.0の表示が変わっていました。
標準準拠モードでは、むしろFirefoxの表示に近かったです。
Mozilla系の方が正しくCSS2.0に準拠しているからなのでしょうか。

で、DTDを削除して見たところ、互換モードとなり今回の記事の現象がおきました。なるほどと思いました。

早速お詫びを追記しました。
後ほどDTD指定の件についても追記したいと思います。
本当にありがとうございました。
みょ〜ん
みょ〜ん
2009年08月01日 20:50
はじめまして。みょ〜んと申します。
私も50歳過ぎてから「今の時代、テーブルでレイアウトするなど時代遅れだ！ スタイルシートのレイアウトぐらい覚えなければ！」と勉強はじめてみたら、勉強早々にDOCTYPEスイッチあたりでへたりました（T_T)。
特に、widthとheightなどの解釈が場合によって違うのでは、レイアウトどころではないではないですか。

ついでながら、ボーダーを点線にしてみると、同じStandardでもボックスの「背景」の範囲がIEだとpaddingの部分まででボーダーは含まないがFFではボーダーの部分まで含んでいることもわかりました。
Quirksモードは、要するに、過去の解釈で作られたページも表示できるように、という意図だから、自分で今からページなどを作る場合はStandardでやればいい、と思ってたのに･･･。

ちなみに、xhtmlの場合、IE6だと、DOCTYPEでStandardにしたつもりでも、その前にxml宣言があるとQuirksで解釈してしまう、というバグがあるそうです。

みょ〜ん
みょ〜ん
2009年08月02日 14:44
す、すみません。
私のような初心者が書き込めるような場所ではないのに、どうも、ストレスがたまってしまったためにコメントしてしまったようです。
ご迷惑でしたら、削除してください。そちらで削除できないようでしたら、こちらで削除させていただきます<(_O_)>


この記事にコメントする

注：livedoorBlogの仕様により、コメントは400字以内となっております。
コメントが長くなりそうな場合は、
メモ帳にコピペなどされておかれることをお勧めいたします。

名前:
URL:
  情報を記憶: 評価: 顔    星
 
 
 
トラックバックURL


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


1. Googleツールバー付きFirefoxでインターネットを快適に  [ 【最新口コミ】お得・おすすめ情報ブログ ]   2005年11月29日 14:18

FirefoxでGoogleツールバーがつけられるようになり、ますます使い勝手が良くなりました。 Firefoxは、サクサク軽く動くのが魅力ですね。IEと併用している人も多いですね。（私は基本はFirefoxを使用です） まだのダウンロードしていない方は、ぜひどうぞ。 ダウンロード...


2. Firefoxを入れて気づいたこと （ＩＥとの表示の違い）  [ ミセス・かんちがいのブログ日記 ]   2007年10月11日 08:57

2007年10月10日（水） 前回書いたように、しばらく前に、firefoxをインストール してみた。 入れる前から、ある程度の予備知識はあった。 afiliateさんの「アフィリエイトは儲かんないっ...