ブラウザごとのCSSの解釈の違い

今回はブラウザのお話です。
皆さんは何のブラウザを使っていますか？
日本ではInternet Explorerのシェアが80%を超えています。
そのうちIE6が50％超、IE7が25％超。
VistaにIE7が標準で搭載されてたり、XPでもIE7がアップロードに同封されてたりの都合でユーザーは増えましたが、やはりまだまだIE6が強いのが現状です。
3位はFirefoxで5％強、4位がSafariで3％と続きます。

Webサイトを制作するにあたってはIE6、IE7、Firefox、Safariと後Operaあたりで確認を行っていればほとんど大丈夫と言えます。(あくまでほとんどね。。。OSの違いによる表示の違いなんかもあるので、WinユーザーはMacで。MacユーザーはWinでも確認しましょう。)

さてここで困るのが、ブラウザ毎の解釈の違いです。

デフォルトスタイルシートの初期化

各ブラウザ毎に「デフォルトスタイルシート」ってのがあります。
デフォルトスタイルシートは各ブラウザが独自にもっているスタイルシートで、こちらが何の指定もしなければ勝手に余白をとったりしてきます。
やっかいなのは全てのブラウザでこのデフォルトスタイルシートが共通では無いところです。
IEでは出なかった余白がFirefoxでは出ちゃったりします。

制作において、CSSを使用する場合にはまずこのデフォルトスタイルシートを初期化して、何の指定もされていない状態にします。

やり方は簡単でデフォルト用のスタイルシートを用意するなりして、外部で読み込むだけ。
ちなみにデモの代わりにこのサイトのデフォルトスタイルシートを見たい方は下記からどうぞ

CSSMAKERのデフォルトCSSをダウンロード

これが本題。ブラウザ毎の解釈の違い(ボックスモデルについて)

IE6は現在主流の他ブラウザに比べると、Web標準準拠度が低いです。
なので、CSSに対する解釈もなんかボケてるというか・・・。
とにかくバグが多いブラウザなので、制作してて最初にバグるのは大抵IE6です。(慣れてくるといちいちプレビューしなくてもコードだけで、あぁこれだとIE6こうなるから、こうして～みたいな感じでIE6のバグに慣れてくる自分がいましたｗ)

さてその中で初心者が一番陥りやすいIE6の罠がボックスモデルの解釈です。
まずは正確なボックスモデルの解釈と、IE6の解釈を比べてみましょう。

っとこのように

正：width+padding+margin+border
IE6：width-(padding+margin+border)

って感じの解釈になってます。

なのでちゃんとCSS書いてるのに。。。(涙
ってなっちゃってる人は一度計算してみましょう。

実際にCSSをマークアップする際にはこういう現象が起きないようにマークアップするか、IE6用のCSSハックを書いてバグ回避するかする事になってきます。