IE6、IE7、FF CSS + DIV の互換性問題に対する包括的なソリューション CSS HACK_html/css_WEB-ITnose

著作権声明: 転載する場合は、記事の元の出典、著者情報、およびこの声明をハイパーリンクの形式で示してください
http://monw3c.blogbus.com/logs/12837657.html

1 . CSS HACK
現在、このメソッドでほぼすべての HACK が解決できます

1. ! important

IE7 での ! important のサポートにより、! important メソッドは IE6 の HACK 専用になりました。覚えておいてください。宣言位置は事前に指定する必要があります。)

}

注: IE7 の

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

2. ユニバーサルフロートクロージャ (非常に重要!)

float をクリアする原理については、[構造マークアップを使用せずに Float をクリアする方法] を参照してください。
Global CSS に次のコードを追加し、閉じる必要がある div に class="clearfix" を追加するだけで毎回機能します。 .

.clearfix:after

content:".";
visibility:hidden; }
.clearfix

{

display:inline-block;

}

/* IE Mac から隠す */
.clearfix {display:block; }

/* IE Mac から隠すの終了 */

/* clearfix の終わり * /

1, ! important

IE7 の !payment のサポートにより、! important メソッドは IE6 の HACK 専用になりました (記述に注意してください。宣言位置は事前に指定する必要があることに注意してください。)



2 , FireFox の IE6/IE77

*+html および *html は、Firefox ではサポートされていない IE 固有のタグです。また、*+html は、IE7 固有のタグです



注:
*+html の HACK。 IE7 は、HTML の先頭に次のステートメントがあることを確認する必要があります:


2. ユニバーサル float クロージャ (非常に重要!)

float をクリアする原理については、[構造マークアップを使用せずに Float をクリアする方法] を参照してください。
次のコードをグローバル CSS に追加し、閉じる必要がある div に class= を追加します。「clearfix」で十分です。これは繰り返し機能します


3. パディングを設定します。 FF の下の div では幅と高さが増加しますが、IE では増加しません (!重要)
2、中央揃えの問題
1) を同じ高さに設定します。現在の div を渡し、vertical-align: middle を渡します (コンテンツを折り返さないように注意してください)。
2) 水平方向に中央揃えにします (もちろん万能ではありません)
3. aタグ内のコンテンツに対して、display: block;を設定する必要があります（ナビゲーションタグで共通）
4. FFとIEのBOXの理解の違いにより、floatに設定されたdivは次のような問題があります。 IE では二重マージンとして使用します。
5. UL タグには、デフォルトでリスト形式とパディングが含まれます。これは、不要なトラブルを避けるために事前に宣言することをお勧めします。高さの適応性を実現するには、div の高さを追加するのが最善です。

1 CSS の場合。 Firefox ie6 と ie7 のスタイル
現在、ほとんどの場合、ハッキングに ! important が使用されています。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; }
手順:
最初に親要素は TEXT-ALIGN: center を定義します。これは、IE では親要素内のコンテンツが中央に配置されることを意味し、この設定で十分です。
ただし、mozilla の中心に置くことはできません。解決策は、サブ要素を設定するときに「MARGIN-RIGHT: auto;MARGIN-LEFT: auto;」を追加することです
この方法を使用してページ全体を中央に配置したい場合は、使用しないことをお勧めします。 DIV では、複数の div を順番に分割できます。
各分割 div で MARGIN-RIGHT: auto;MARGIN-LEFT: auto; を定義するだけです。

3 ボックス モデルのさまざまな解釈

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

4 浮動小数点によって生成される倍精度の距離
#box{ float:left; 100px ; margin:0 0 0 100px; //この場合、IE は 200px の距離を生成します。 display:inline; //float を無視します。
Block 要素の特徴について詳しく説明します。新しい行で始まり、高さ、幅、行の高さ、余白がすべて制御可能 (ブロック要素) Inline 要素の特徴は、次のとおりです。他の要素と同じ行上では...制御できません。 (インライン要素);

#box{ //インライン要素をブロック要素としてシミュレートできます。 //同じ行に配置する効果を実現します。

5 IE と width高さの問題

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

6 ページの最小幅

min-width は、レイアウトが常に正しいことを保証するために、要素の最小幅が特定の幅未満にならないように指定できる非常に便利な CSS コマンドです。しかし、IE はこれを認識せず、実際には幅を最小幅として扱います。このコマンドを IE で機能させるには、タグの下に
を配置し、クラスを div に割り当てます。
CSS は次のように設計されます:
#container{ min-width: 600px; width:expression(document.body.clientWidth 最初の min-width は通常です。ただし、行 2 の幅には、IE でのみ認識される Javascript が使用されているため、HTML ドキュメントの形式が緩和されます。実際にはJavaScriptの判断により最小幅を実装しています。

7 float をクリアします

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

左側のオブジェクトはフロートし、右側のオブジェクトのテキストは左側から 3 ピクセル離れた位置に配置されます。 left{ float :left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //この文が重要です}
HTML コード

9 属性セレクター (これは互換性があるとは見なされません。CSS を非表示にするバグです)

p[id]{}div[id]{}
これは IE6.0 およびそれ以下のバージョンでは非表示であり、FF および OPera で動作します
属性セレクターとサブセレクター まだ違いがあります。サブセレクターの範囲は形式的には狭くなりますが、属性セレクターの範囲は比較的大きくなります。たとえば、p[id] では、id を持つすべての p タグが同じになります。スタイル

10 IE かくれんぼの問題

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

11 高さ非適応

高さ非適応とは、特に内部オブジェクトが
margin または Paddign を使用している場合、内側のオブジェクトの高さが変更された場合に、外側のレイヤーの高さを自動的に調整できないことを意味します。
例:


pContent in object

CSS: #box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; }

解決策: CSS コード: .1{height:0px;overflow:hidden;} の上下に 2 つの空の div オブジェクトを追加するか、DIV に border 属性を追加します。