1. ボックスインタープリタのさまざまな解釈。
width:600px; //ie6.0の場合-
width:500px; //ff+ie6.0の場合
}
＃箱{
width:600px!重要 //ffの場合
width:600px; //ff+ie6.0の場合
width :500px; //ie6.0の場合
}
2. IE で CSS を非表示にするには、サブセレクター
html>body #box{ }
を使用します。
3、IEでのみ認識される
*html #box{ }
4. ie/win では有効ですが、ie/max では非表示になります。バックスラッシュを使用してください。
5. ie のスタイルを個別に定義する
6. 浮動IEにより生成される2倍の距離
＃箱{
フロート:左;
幅:100ピクセル;
margin:0 0 0 100px; //この場合、IE は 200px の距離を生成します。
display:inline; //フロートを無視します。
ここでは、block と inline の 2 つの要素について詳しく説明します。 Block 要素の特徴は次のとおりです。常に新しい行で始まり、高さ、幅、行の高さ、およびマージンはすべて制御できます (ブロック要素)
。
Inline 要素の特徴は次のとおりです。 他の要素が同じ行にあるため、制御できません (インライン要素)。
＃箱{
display:block; //インライン要素をブロック要素としてシミュレートできます
display:inline; //同じ行に配置する効果を実現します。
diplay:table; // ff の場合、テーブルの効果をシミュレートします。
}
7、オプレアのみ
@media all and (min-width:0px){
＃箱{ }
8.
IEと幅と高さの問題
IE は min- の定義を認識しませんが、実際には通常の幅と高さを min があるかのように扱います。幅と高さだけを使用する場合、これは大きな問題になります。
これら 2 つの値は通常のブラウザでは変更されません。min-width と min-height のみを使用すると、IE では幅と高さがまったく設定されないことになります。
たとえば、背景画像を設定する場合は、この幅がより重要になります。この問題を解決するには、次のようにします。
#box{
幅: 80ピクセル;
高さ: 35ピクセル;
}
html>本文#box{
幅: 自動;
高さ: 自動;
最小幅: 80ピクセル;
最小高さ: 35px;
}
9. ページの最小幅
min-width は非常に便利な CSS コマンドで、植字が常に正しいことを保証するために、要素の最小幅が特定の幅未満にならないように指定できます。しかし、IE はこれを認識せず、実際には幅を最小幅として扱います。このコマンドを IE でも使用できるようにするには、このコマンドを <body> タグの下に配置し、div のクラスを指定します。CSS は次のように設計されています
。
最小幅: 600ピクセル;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
最初の min-width は通常ですが、2 行目の幅は IE でのみ認識される Javascript を使用するため、HTML ドキュメントの形式が緩和されます。実際にはJavaScriptの判断により最小幅を実装しています。
同じ方法を使用して IE の最大幅を実現することもできます。
＃容器
{
最小幅: 600ピクセル;
最大幅: 1200ピクセル;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto";
}
10、クリアフロート
.ハックボックス{
display:table; // オブジェクトをブロック要素レベルのテーブルとして表示します
}
または
.ハックボックス{
クリア:両方;
、
after (擬似オブジェクト) を追加して、オブジェクトの後に発生するコンテンツを設定します。これは通常、IE ではこの擬似オブジェクトをサポートしておらず、IE ブラウザーでもサポートされていないため、IE/ には影響しません。 WINブラウザ。 -----これが一番面倒なんですが…。
#ボックス:後{
コンテンツ： "。";
表示: ブロック;
高さ: 0;
クリア：両方。
可視性: 非表示;
}
11. DIV フローティング IE テキストにより 3 ピクセルのバグが発生する
左側のオブジェクトはフロートされ、右側のオブジェクトは外側のパッチの左マージンを使用して配置されます。右側のオブジェクト内のテキストは、左側から 3 ピクセルの間隔で配置されます。
＃箱{
フロート:左;
幅:800ピクセル;
}
＃左{
フロート:左;
幅:50%;
}
＃右{
幅:50%;
}
*html #left{
margin-right:-3px; //この文が鍵です
HTML
コード
12. 属性セレクター (これは互換性があるとは考えられません。CSS を非表示にする際のバグです)
p[id]{}
div[id]{} は、
IE6.0 より前のバージョンと IE6.0 では非表示になります。FF
と OPera で使用される属性セレクターとサブセレクターにはまだ違いがあります。属性選択の範囲は縮小されています。デバイスの範囲は比較的広いです。たとえば、p[id] では、id を持つすべての p タグが同じスタイルになります。