CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。
* {
margin: 0;
padding: 0;
font-style: normal;
font-weight: normal;
}ここらへんは基本だと思ってたんだけど、未だにこれをやっていなくて、あのブラウザとこのブラウザで見た目が違うんですけどってのは結構いたりする。上記に text-decoration: none; や font-size: 100%; なんかを加えても良いかも知れないけど、最低限マージンとパディングは無くしておくことをお薦めする。もちろん、これによって要素ごとにいちいち設定しなければいけなくなるんだけど、それによる CSS ファイルの肥大化なんか大したことはない。
もう、おまじないのように必ず先頭に記述する癖を付けておいた方が良いんじゃねぇのとか個人的には思ってたり。
Comments
リニューアルおめでとうございます。
e-luckさんっぽくて良い感じですね。
これからも頑張ってください。
閑話休題。
私はまぁ、ケースバイケースですが、本格的にする時は、必要の無さそうなスタイルはまず、すべて初期化します。
で、スタイルシート肥大化の問題と、その他諸々。
一度作ってしまえば、@import なんかを使ってみるのもありですが、これは使うだけでブラウザの動作を重くしてしまう。
いっそXMLでも使った方がよいのかとも思いますが、一から全部書くのも、これまた大変で、ブラウザの対応状況も以下略（汗
CSSの仕様柄、微妙にブラウザによって解釈の違う部分というのがあります。
スタイルを詰めていくと、結構これが大変ですね。
私の場合は、そこでCSS Hackのご登場とあいなります。
e-luck さんは、ブラウザ間の差はどうやってます？
前にも言ったことあるかも知れませんが、ばあどさんとこの CSS Dencitie を非常に参考にさせて頂いたことがあって、僕の中で CSS hack と言ったらばあどさんか su さんかってな感じだったりするんで、何ともおこがましいんですが、基本的にブラウザ の解釈の違いで気にするのはボックスモデル関連だけですね（OS によるフォントサイズはあまり気にしない）。
なんで、なるだけ width (height)を指定したボックスでは padding を使わず、子要素のマージンで調整したりって感じで回避して、どうしようもない場合は最初に box-width (height) で計測したサイズを指定し、後から子供セレクタ上書きするのを好んで使います。で、どうしようも無いものは最終兵器としてハックを使うってのが一番多いパターンですね。
個人サイトなんで、古いブラウザはほとんど無視です :-P
確認用に使用しているブラウザは、マック IE 5.2.3、Safari、Win IE5.5、6.0、Opera 8.x、Firefox1.x くらいですねー。ここら辺で大幅に崩れてなければオッケーってな感じで結構いい加減です :-D
ハックって非常に便利なんですが、ブラウザがバージョンアップするごとに検証しなければいけないのが面倒ですよね。（例えば IE7とか）
全てのブラウザが仕様に準拠した描画をしてくれれば一番良いんですが。んでもって、後は付加価値で好みのブラウザを選べるような環境が理想的っすね。