div+css の互換性問題に関する学習のまとめ_html/css_WEB-ITnose

ハックモデル
firefox ie7 ie6
left: *left: _left:

注: IE は * を認識できます;
IE6 は * を認識できませんが、!重要、バレエ シューズ、
IE7 は * を認識できますが、! important も認識できます。
FF は * を認識できませんが、! important は認識できます。
IE6 はアンダースコア「_」をサポートし、IE7 も Firefox もアンダースコアをサポートしません。
!重要な優先度
margin-left:20px ! important;
margin-left:10px;
ie7 は最初の項目を優先しますが、ie6 は優先度をサポートしていないため、最初の項目を無視すると、 2 番目の項目

IE8 Web デザイン CSS 互換性



その他の互換性スキル (また面倒)

1, FF div にパディングを設定すると幅と高さが増加しますが、IE では増加しません (!重要)
2、中央揃えの問題
1)。後続の div と同じ高さを指定し、関数vertical-align: middleを渡します（コンテンツを折り返さないように注意してください。）
2）水平方向の中央揃え：0 auto;（もちろん、これは普遍的ではありません）。 a タグ内のコンテンツにスタイルを追加する必要がある場合は、display: block; を設定する必要があります (ナビゲーション タグで一般的)
4. FF と IE の BOX の理解の違いにより、2px の違いが発生し、次のような問題が発生します。 IE では float に設定された div のマージンが 2 倍になります。
5. FF では ul タグがデフォルトになります。 不要なトラブルを避けるために、事前に宣言するのが最善です。
6. div の高さを外部ラッパーとして設定しないでください。高度な適応性を実現するには、overflow: hidden を追加するのが最善です。
7、手の形の光源について。そして、ハンドは IE にのみ適用されます
その他の互換性テクノロジー
Firefox ie6 ie7 の CSS スタイル
それらのほとんどが現在使用されています! ハックに来て、ie6 と Firefox でのテストは正常に表示されます
しかし、ie7 は正確に説明できます !重要です。これにより、リクエストに従ってページが表示されます。手がかりを見つけました
IE7 の良いハック方法は、「*+html」を使用することです。今度は IE7 を使用して試してみてください。問題はないはずです。
これで次のような CSS を書くことができます:

#1 { color: #333; }
* html #1 { color: #666; }
次にフォントFirefoxでは色は#333、IE6では文字色は#666、IE7では文字色は#999で表示されます。

2 CSS レイアウトにおける IC 取引ネットワークのセンタリング問題
重要なスタイル定義は次のとおりです:

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{ //ie6.0 の場合 - width:500px; //ff+ie6.0 の場合}
#box{ width:600px!重要 // for ff width:600px; //for ff+ie6.0 width:500px; //for ie6.0-}

4 IC 取引ネットワークのフローティング ie

#box{ float:left; ; margin:0 0 0 100px; //その場合、IE は 200px のギャップを生成します。 display:inline; // フロートを非表示にします。
Block と inline の 2 つの要素について詳しく説明します。要素は次のとおりです。 old 新しい行で開始され、高さ、幅、行の高さ、余白をすべて制御できます (ブロック要素)。 Inline 要素の特徴は次のとおりです。 他の要素と同じ行にある、Xinwang Technology、 ... 制御できません (埋め込み要素);

#box{ display:block; //インライン要素はブロック要素として模倣できます。 //統一された配置を実現する結果 diplay:table;幅と高さを取得します 質問への答え

IE は min- の定義を認識しませんが、実際には一般的な幅と高さを min を持つものとして使用します。この答えは大きすぎます。幅と高さだけを使用する場合、この 2 つの値は、min-width と min-height だけを使用する場合、基本的に 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_r(document.body.clientWidth 最初の min-width は通常ですが、行 2 の幅は Javascript を使用します。 IE ご存知のとおり、これにより HTML ドキュメントが形式的ではなくなります。実際にはJavaScriptの判断により最小幅を実装しています。

7 float をクリアします

.hackbox{ display:table; // オブジェクトをブロックレベルのテーブルとして表示します} Or.hackbox{ clear:both;}
または追加: after (疑似オブジェクト), set 後に生成されるコンテンツこのオブジェクトは通常、コンテンツと組み合わせて使用​​されます。IE はこの疑似オブジェクトをサポートしておらず、IE ブラウザーでもサポートされていないため、IE/WIN ブラウザーには影響しません。この種の最も厄介なこと...#box:after{ content: "."; display: block; height: 0; clear: Both; Visibility: hidden;}
8 DIV フローティング IE Baiyun の発生 3 Xiangxin
右側のオブジェクトはフローティングであり、右側のオブジェクト内の空白は右側から 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]{}
これは、IE6.0 未満のバージョンと IE6.0、FF および OPera 関数では非表示になります
属性セレクターとサブセレクターは引き続き使用できます。違いはありますが、サブセレクターのスコープは形式の点で縮小され、属性セレクターのスコープは比較的大きくなります。たとえば、p[id] では、すべての p タグが使用されます。

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 オブジェクトを追加します: .1{height:0px;overflow:hidden;} それを DIV border プロパティに追加します。 。 関連トピック記事: