CSS ハックは、IE6/IE7/FF_Experience 交換との CSS の完全な互換性を実現する一般的な方法です。

CSS がさまざまなブラウザと互換性があることは当たり前のことです。チュートリアルはインターネット上にあります。以下の内容は目新しいものではなく、純粋に個人的なまとめです。初心者の方に少しでも役立つことを願っています。
1. CSS HACK
次の 2 つの方法で、今日のほぼすべての HACK を解決できます。

1、! important

IE7 の ! important サポートにより、 ! important メソッドは現在のみです。 IE6 HACK用（書き方に注意。宣言位置は事前に指定する必要があるので注意）



2、Firefox の場合は IE6/IE77

* html



注:
* IE7 の html HACK では、HTML の先頭に次のステートメントが必ず含まれる必要があります:


2. ユニバーサルフロートクロージャ

フロートをクリアする原理については、[構造マークアップを使用せずにフロートをクリアする方法]を参照してください。
次のコードをグローバル CSS に追加し、閉じる必要がある div に class="clearfix" を追加します。

3. その他の互換性に関するヒント

1. FF で div のパディングを設定すると、幅と高さは増加しますが、IE では増加しません。(!重要で解決できます)
2、センタリングの問題。
1). 垂直方向の中央揃え。line-height を現在の div と同じ高さに設定し、vertical-align: middle を使用します。(コンテンツを折り返さないように注意してください。)
2).水平方向中央揃え margin: 0 auto;(もちろん全能ではありません)
3. a タグ内のコンテンツにスタイルを追加する必要がある場合は、display: block; を設定する必要があります (ナビゲーション タグで一般的) 4. FFとIEのBOXの理解の違いで2pxの差が出る 他、IEではfloatに設定したdivのマージンが2倍になるなどの問題もある
5. ulタグはFFの下にあるデフォルトではリストスタイルとパディングがあります。無用なトラブルを避けるために、事前に宣言しておくことをお勧めします (ナビゲーションタグやコンテンツリストに共通)
6. div の高さを外部ラッパーとして設定しないでください。overflow: hidden. を追加するのが最善です。高さの適応性を実現します。
7、ハンド カーソルについて。カーソル: ポインタ。ハンドは IE にのみ適用されます。

1 Firefox IE6 IE7 用の CSS スタイル
現在、ほとんどの CSS スタイルは !重要 を使用しています。 ie6 と Firefox のテストでは正常に表示できます。
しかし、ie7 は ! important を正しく解釈できるため、必要に応じてページが表示されなくなります。ハックを見つける
IE7 の優れたハックは、「* html」を使用することです。IE7 でブラウズすれば、問題はありません。
次に、次のような CSS を記述します:

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */ * html #1 { color: #999; } /* IE7 */
そうすると、フォントの色は、Firefox では #333、IE6 では #666、IE7 では #999 と表示されます。

2 CSS レイアウトの中央揃えの問題
主なスタイル定義は次のとおりです。

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN -LEFT: auto; }
説明:
まず、親要素で TEXT-ALIGN: center を定義します。これは、親要素のコンテンツが中央に配置されることを意味します。IE の場合は、この設定で十分です。
しかし、mozilla の中心に置くことはできません。解決策は、子要素を設定するときに「MARGIN-RIGHT: auto;MARGIN-LEFT: auto;」を追加することです。
この方法を使用してページ全体を中央揃えにしたい場合は、推奨されないことに注意してください。 DIV に設定すると、複数の div を順番に分割できます。
分割した各 div で MARGIN-RIGHT: auto;MARGIN-LEFT: auto; を定義するだけです。

ボックス モデルの 3 つの異なる解釈

#box{ width:600px; //ie6.0 の場合 - w\idth:500px; //ff ie6.0 の場合}
#box { width:600px! important //ff の場合 width:600px; //ff ie6.0 の場合 width /**/:500px; //ie6.0-の場合

4 浮動小数点によって生成される Double ie 距離

#box{ float:left; width:100px; margin:0 0 0 100px; //この場合、IE は 200px の距離を生成します display:inline; //float を無視します} ブロック要素とインライン要素の 2 つの要素について詳しく説明します。ブロック要素の特徴は、常に新しい行で始まり、高さ、幅、行の高さ、マージンをすべて制御できることです (ブロック要素)。 Inline 要素の特性は次のとおりです: 他の要素が同じ行にある...制御できません (インライン要素);

#box{ display:block; // インライン要素をブロック要素としてシミュレートできますdisplay:inline; //同じ結果を得る 行配置の効果 diplay:table;

IE は min- の定義を認識しませんが、実際には通常の幅と高さを min があるかのように扱います。これは大きな問題を引き起こします。width と height のみを使用する場合、
これら 2 つの値は通常のブラウザでは変更されません。min-width と min-height のみを使用する場合は、変更しないことと同じです。 IEで幅と高さを高く設定します。
たとえば、背景画像を設定する場合は、この幅の方が重要です。この問題を解決するには、次のようにします:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px ;}

6 ページの最小幅

min-width は非常に便利な CSS コマンドです。要素の最小幅を特定の幅より小さくできないように指定できます。レイアウトは常に正しいものにすることができます。しかし、IE はこれを認識せず、
実際には幅を最小幅として扱います。このコマンドを IE で機能させるには、

タグの下に

を配置し、その div のクラスを指定します。
これにより、CSS は次のように設計されます。
#container{ min-width : 600px; width:expression(document.body.clientWidth 最初の min-width は通常ですが、2 行目の幅は Javascript を使用します。これを認識できるのは IE だけなので、HTML ドキュメントの形式も低くなります。実際にはJavaScriptの判断により最小幅を実装しています。

7 フロートをクリアします

.hackbox{ display:table; //オブジェクトをブロック要素レベルのテーブルとして表示します} または .hackbox{ clear:both;}
または以下を追加します。 after (擬似オブジェクト) は、オブジェクトの後に発生するコンテンツを設定します。通常はコンテンツと組み合わせて使用​​されます。IE はこの擬似オブジェクトをサポートしていませんが、Ie 以外のブラウザはこれをサポートしています。
したがって、IE/WIN ブラウザには影響しません。 。これの一番厄介な点は...#box:after{ content: "."; display: block; height: 0; clear: Both; Visibility: hidden;}

8 DIV float IE テキストが生成される3 ピクセルのバグ

左側のオブジェクトはフロートし、右側は外側のパッチの左マージンを使用して配置されます。右側のオブジェクト内のテキストは、左側から 3 ピクセルの間隔になります。
#box{ float :left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //この文が鍵です} HTML コード

9 属性セレクター（これは互換性がありません。CSS を非表示にするバグです）

p[id]{}div[id]{}
これは IE6.0 用です。 IE6.0未満のバージョンは非表示となり、FFとOPeraの機能が隠されています
属性セレクターとサブセレクターにはまだ違いがあり、サブセレクターの範囲は形式的に狭められていますが、属性セレクターの範囲は比較的狭いですp[ id] などの大きな場合、ID を持つすべての p タグは同じスタイルです。

10 IE かくれんぼの問題

div アプリケーションが複雑な場合、いくつかの問題が発生します。各列のリンク、DIV このとき、かくれんぼの問題が発生しやすくなります。
一部のコンテンツが表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。
解決策: #layout に line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。

11 高さの非互換性

高さの非互換性とは、内側のオブジェクトの高さが変更されたときに、特に内側のオブジェクトがマージンまたは
マージンを使用している場合に、外側のレイヤーの高さを自動的に調整できないことを意味します。パディンアワー。
例:

p オブジェクトのコンテンツ

CSS: #box {background-color: # eee; }
#box p {margin-top: 20px; margin-bottom: 20px; text-align:center; }
解決策: P オブジェクトの上下に 2 つの空の div オブジェクト CSS コードを追加します :.1 {height:0px;overflow:hidden;} または DIV に border 属性を追加します。