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

を配置し、その div のクラスを指定します。
これにより、CSS は次のように設計されます。

#container{
min-width: 600px;
width:expression(document.body.clientWidth }

最初の最小値width は Normal ですが、2 行目の幅には IE でのみ認識される Javascript が使用されているため、HTML ドキュメントの形式が緩和されます。実際にはJavaScriptの判断により最小幅を実装しています。

7 Clear float

.hackbox{
display:table;
// オブジェクトをブロック要素レベルでテーブルとして表示します
>}

または

.hackbox{
clear:both;
}

または add:after (擬似オブジェクト) で発生する内容を設定しますオブジェクトの後にあり、通常はコンテンツと組み合わせて使用​​されます。IE はこの疑似オブジェクトをサポートしておらず、Ie ブラウザーでもサポートされていないため、IE/WIN ブラウザーには影響しません。これが一番面倒です

......#box:after{
content: ".";
display: block;
height: 0;
clear :両方;
可視性: 非表示;
}

8 DIV フローティング 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]{}
p[id]{}div[id]{}

これは、IE6.0 以前、FF および OPera 関数では非表示になります

属性セレクターとサブセレクターの間にはまだ違いがあります。サブセレクターの範囲は形式的に狭いですが、属性セレクターの範囲は比較的広いです。たとえば、p[id] では、すべてp タグには次の ID が含まれています。

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 属性を追加します。