ブラウザの解釈

CSSを使用していて、一番の問題になる事は、ブラウザによる解釈の違いではないでしょうか。

1. OSにより基本となる文字サイズが異なる問題（UNIX,Linux,Windows,Mac,Solalis,その他）
2. 閲覧者の表示文字サイズによる問題（最小、小、中、大、最大、その他）
3. 閲覧者の画面サイズ、および表示サイズによる問題(600x480,800x600,1024x768,1280x1024,その他)
4. 閲覧者の使用しているブラウザによる問題（IE5,IE6,IE7,NN4,NN6,NN7,FireFox,Opera,Mozilla,その他）

これらの問題を解決するため、いろいろなハックが生まれましたが、最近のモダンブラウザといわれるブラウザは、 W3C標準の解釈に近づいてきています。そのため下手にハックを使用すると、反対に表示がおかしくなる場合も、 あるので注意が必要です。

まずは、スクリプト、あるいはSSI、CGI等を使い、閲覧者のOSとブラウザを判断し、それに適した、CSSを読ませ、 正しく表示するページを作ることを目標にしましょう。

boxの解釈

このボックスの解釈は、IE系とMozilla系では、大きな違いがあります。
この解釈の違いは、箱の大きさを、幅と高さで決めた際、margin,paddingを、その中にとるか外にとるかの相違です。

このためにIE系とMozilla系ブラウザで見た場合、ボックスの表示される、大きさが異なってしまうのです。

floatの解釈

float要素を使用すると、回り込みを指定できるが、この要素を使用した場合も、ブラウザの解釈により 表示が意図しない場合がある。
この場合は、.clearfixというハックを、使用して回避するようです。

.clearfix:after{
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{
display: inline-block;
}

/*Hides fromIE-mac |*/
*html.clearfix{
height: 1%;
}

.clearfix{
display: block;
}
/* End hide form IE-mac */

ハックは、この他にも数々あるが、ブラウザ自体もバグの改良がされているので、いつまでもハックに頼る時代は、 続かない事を、頭の片隅において置きましょう。