ホームページ >ウェブフロントエンド >CSSチュートリアル >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 で機能させるには、
p オブジェクトのコンテンツ