[転送] CSS ブラウザの互換性問題の概要_html/css_WEB-ITnose

E6.0、ie7.0 および Firefox の CSS 互換性の問題 1.DOCTYPE は CSS 処理に影響します
2.FF: margin-left と margin-right が auto に設定されている場合、div はすでに中央に配置されていますが、IE は動作しません
3 .FF: body が text-align を設定するとき、div は margin: auto (主に margin-left、margin-right) を中央に設定する必要があります
4.FF: パディングを設定した後、div は高さと幅を増加させますが、IE は増加しません追加の高さと幅を設定するには ! important を使用します
5.FF: ! important をサポートしますが、IE はそれを無視します。 ! important を使用して FF の特別なスタイルを設定できます。 xxxx ! という文は注目に値します。 important は別の文の上に配置する必要があります
6. div の垂直方向の中央揃えの問題:vertical-align:middle; 行間を DIV 全体と同じ高さに増やすと、テキストを挿入すると垂直方向の中央揃えになります。 。欠点は、行の折り返しなしでコンテンツを制御する必要があることです
7. カーソル: ポインターは IE FF でカーソルの指の形を同時に表示できますが、手は IE でのみ使用できます
8. FF: 境界線を追加し、リンクの背景色を設定するには、display: block を設定し、float: left を設定する必要があります。これにより、改行がないことが保証されます。メニューバーに関して、a とメニューバーの高さを設定するのは、下端の表示がずれないようにするためです。高さを設定しない場合は、メニューバーにスペースを挿入できます。
9. mozilla firefox と IE の BOX モデルの解釈が一致しないため、2px の違いが生じます。 解決策: div{margin:30px! important;margin:28px;}
この 2 つの margin の順序を記述してはいけないことに注意してください。 Ajie 氏によると、引数 ! important は IE では認識されませんが、他のブラウザでは認識されます。実際にIEでは div{maring:30px;margin:28px} のように解釈されます
定義を繰り返すと最後の定義に従って実行されるので、単に margin:XXpx! important;

と書くことはできません10. IE5とIE6の不一致のBOX説明
div{width:300px;margin:0 10px 0 10px;}
IE5でのdivの幅は300px-10px(右パディング)-10px(左パディング)と解釈されます。 div の最終的な幅は 280px ですが、IE6 および他のブラウザーの幅は 300px + 10px (右パディング) + 10px (左パディング) = 320px として計算されます。現時点では、 div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}
これについて/**/ に次の変更を加えることができます。それが何であるかはよくわかりませんが、IE5 と Firefox がサポートしていることだけがわかります。そうではありません。誰かがそれを理解している場合は、教えてください、ありがとう！ :)

11. Mozillaではデフォルトでulタグにpadding値が入っていますが、IEではmarginのみが値を持っているので、ul{margin:0;padding:0;}
を定義すればほとんどの問題は解決できます


注:

1. float div は閉じられている必要があります。

例: (floatAとfloatBの属性はfloat:leftに設定されています;)


ここでのNOTfloatCは平行移動を続けたくなく、下方向に配置したいと考えています。
このコードはIEでは問題ありませんが、問題はFFにあります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。

の間に
を追加します
このdivは宣言位置に注意し、最も適切な場所に配置する必要があり、float属性を持つ2つのdivと同じレベルにある必要があります。そうしないと異常が発生します。
そして、clear スタイルを次のように定義します: .clear{
clear:both;}
さらに、高さが自動的に適応できるようにするために、このとき float を含むボックスの場合、ラッパーに overflow: hidden;
を追加します。現時点では、高さの自動調整は IE では無効です。互換性を実現するには、IE のレイアウト プライベート属性をトリガーする必要があります。
例えば、ラッパーは次のように定義されます:

プログラムコード

.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}

2. ダブルマージン問題。

IEでfloatに設定されたdivに設定されたマージンが2倍になります。これはie6に存在するバグです。
解決策は、display:inline;を追加することです
例:



対応するCSSは

プログラムコード

#IamFloat{
float:left;
margin:5px;/*IEでは10pxと理解されます。 */
display:inline;/*IE では 5px として認識されます*/}

3. コンテナの包含関係について

多くの場合、特にコンテナ内に 2 つまたは 3 つの float div などの並列レイアウトがある場合、幅の問題が発生しやすくなります。 IE では、外側の層の幅は、より広い内側の div によって圧迫されます。ピクセルレベルの精度で測定するには、必ず Photoshop または Firework を使用してください。

4. 高さの問題について

コンテンツが動的に追加される場合は、高さを定義しないのが最善です。ブラウザは自動的に拡大縮小できますが、静的コンテンツの場合は高さを設定するのが最善です。 (自動で開かない場合もあるようです。何が起こっているのかわかりません)

5. 最も無慈悲な方法 - !重要;

本当に細かい問題を解決する方法がない場合は、次の方法を使用できます。このメソッド。FF の「! important」は最初に自動的に解析されますが、次の

プログラム コード

.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px ! important; /*FF のスタイル*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px /* IE のスタイル */}

; xxxx でなければならないことに注意してください !重要 この文は別の文の上に配置されています 上で述べたように、



IE7.0 がリリースされ、CSS サポートに新たな問題が発生しました。ブラウザの数が増え、Web ページの互換性が悪化しています。IE7.0 の互換性の問題を解決するために、私は次の記事を見つけました:


現在、私は主にハッキングに !重要なメソッドを使用しています。 ie6 と Firefox のテストでは正常に表示できますが、ie7 では ! important を正しく解釈できるため、ページが必要どおりに表示されなくなります。検索した結果、「*+html」を使用するという IE7 用の良いハックを見つけました。これで IE7 で閲覧できるようになりました。問題はありません。

これで次のような CSS を書くことができます:

プログラム コード

#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
* +html #example { color: #999; } /* IE7 */

すると、フォントの色は、Firefox では #333、IE6 では #666、IE7 では #999 として表示されます。互いに干渉し合う。