IE のわがままな数値解釈

絶対に相容れない Web ブラウザ、Microsoft Internet Explorer と Mozilla Firefox。以前から CSS の解釈に違いがあることが何度も指摘されていましたが、具体的にはどんな解釈の違いがあるのでしょうか。

一般的に言われているのは padding と margin の基準となるところ。IE は border 幅を設定していても、それを含めた数値を margin としている、というのは有名だったりします。Firefox など Mozilla、Gecko 系はそうでなく、border を含めない数値で計算するのですが。どちらかと言うと Firefox のほうが正しいんですがね。

それ以外にも、いろんなところで IE と Firefox の捉え方の違いがあるんです。

例えば table の中に table を入れ子にした場合。内側の table の横幅が 50% に指定されていたとすると、何を基準に 50% の幅にするか、ということ。IE ならおそらく、外側の table を基準にして、内側の table はその半分の幅で表示されると思うのですが、Gecko は多分、表示されているウィンドウの幅を 100% として、そのウィンドウ幅の半分の長さを持ってくると思うんですよ。

まあ、border の問題も入れ子の幅問題も、文書型 (DOCTYPE) 宣言をしっかりしてやれば、お互いの差異ってのは縮まるようにできているんですが。初心者などはそういうのを知らずに Web サイトならぬホームページをこしらえてしまうようで。

タグの類をなるべく覚えずに簡単にページを作りたい人は、できることならば文書型を Strict にするといいですね。悪習である font タグとか使えないので、覚えなきゃいけないことは減りますよ。あと、ソースも見やすくなってページ管理が楽ちんですしね。僕がサイト作りを教えるなら、font タグなんていうものは絶対に教えませんわ。

話を戻しますが、Firefox は CSS に頼った画面表示を好むようで、IE はその逆に慣れているようですね。