IE6、IE7、Firefox 間の DIV サポートの違い_Experience 交換

1 Firefox ie6 ie7 用の CSS スタイル

現在、ハッキングに ! important を使用するものがほとんどです。ie6 と Firefox のテストでは正常に表示されますが、ie7 では ! important を正しく解釈できます。これにより、ページが必要に応じて表示されなくなります。 「* html」を使用するという IE7 用の良いハックを見つけました。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 を定義します。これは、親要素で TEXT-ALIGN: center を定義します。内部のコンテンツは中央に配置されます。IE ではこの設定で十分です。

しかし、mozilla の中心に置くことはできません。解決策は、子要素の定義を設定するときに「MARGIN-RIGHT: auto;MARGIN-LEFT: auto;」を追加することです

この方法を使用してページ全体を中央揃えにしたい場合は、 DIV でラップしないことをお勧めします。分割された各 div で MARGIN-RIGHT: auto;MARGIN-LEFT: auto; を定義するだけで、複数の div を順番に分割できます。

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

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

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

#box{ display:block; // インライン要素をブロック要素としてシミュレートできますdisplay:inline; //実装 同じ行に並べた場合の影響 diplay:table;

5 IE と幅と高さの問題

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 で機能させるには、 タグの下に