クロスブラウザ対応のために抑えておきたい5つのこと

クロスブラウザとは

ここでいうクロスブラウザとは、複数のブラウザでちゃんと見れるようにHTMLコーディングすることです。

1. Firefoxなどの標準準拠のブラウザに合わせてコーディングをする。
始めに基準のブラウザを決めます。シェアが高く標準準拠したブラウザということでFirefoxがいいでしょう。
基本はFirefoxで見れるように作り、その他のブラウザとの表示の違いが出てしまった場合のみ、CSSハック・条件付コメントを使い、その差をなくします。と言っても表示に差がでるのは、ほとんどIEだけですが。
2. DTD、文字コード、ブラウザの表示モードを統一する。
そのサイトごとに必ず統一しましょう。特に表示モードは顕著に違いが現れるので注意が必要です。また、WinIE6.0ではXML宣言をすると後方互換モードになるバグがあるので注意しましょう。
3. ブラウザのデフォルトスタイルシートを無効化する。
各ブラウザは独自スタイルを持っていて、それが原因で表示に違いが出てくることがあります。
そのため、全称セレクタなどを使用して margin や padding は 0 にしておきましょう。
4. CSSハック、IE条件付コメントの使い方を理解する
各ブラウザで表示の違いがあるため、その違いを解消するためにCSSハックやIE条件付コメントを理解しておきましょう。
5. 子孫要素に float の解除に clearfix を使う。

これらを指定しないと、親要素の背景が表示されなかったり、直後の要素との余白などがおかしくなったりします。
clearfixについて詳しくはこちら