互換性の理由: ブラウザーのベンダーやバージョンが異なると、CSS のサポートと解析方法が異なるため、ブラウザー環境ごとにページ表示効果が異なります。
互換性を解決する方法：①CSSリセット
②CSSハック
css リセット: CSS のデフォルト スタイルをリセットすることで、最も基本的な互換性の問題を解決します。
css ハック: 統一されたページ効果を得るには、異なるブラウザーまたは異なるバージョン用に特定の CSS スタイルを記述します。
cssハック：①css属性プレフィックス方法
②セレクタプレフィックス方式
③ie条件付きアノテーション法
ie 条件付きコメントメソッド: (ie が HTML ヘッダーにある場合は参照)
| IEでのみ有効 | <!--[if IE]>このテキストは IE ブラウザでのみ表示されます<![endif]--> |
| IE6でのみ有効 | <!--[if IE6]>このテキストは IE6 ブラウザでのみ表示されます<![endif]--> |
| IE6以降のバージョンでのみ有効です | <!--[if gte IE6]>このテキストは IE6 (含む) 以降のブラウザでのみ表示されます<![endif]--> |
| IE8のみでは動作しません | <!--[if ! IE8]>このテキストは IE8 以外のブラウザでのみ表示されます<![endif]--> |
| IE 以外のブラウザに有効 | <!--[if ! IE]>このテキストは IE 以外のブラウザでのみ表示されます<![endif]--> |
属性プレフィックス方式: ブラウザが認識できるいくつかの記号を属性の前に追加します。
*色:赤 *ie6/7で認識可能
_background: yellow ie5/6は認識できます
! important は ie6 では認識されませんが、他のブラウザでは認識されるため、! important の追加が最優先されます。
セレクター接頭辞の方法: ブラウザーが認識できるいくつかの記号をセレクターの前に追加します。