(経験) DIV+CSS で IE6、IE7、IE8、FF の互換性問題を解決_html/css_WEB-ITnose

(経験) DIV+CSS は IE6、IE7、IE8、FF の互換性問題を解決します
それについて話しましょう 私はほぼ 1 年間 DIV+CSS をやっていて、互換性問題を解決するための多くの方法を蓄積してきました。ここでは、現在の主流のもの (IE6、IE7、IE8、FF) についてのみ説明します。
1 の互換性の問題については、IE7 互換性に対処するのが最適です。 。以下のコードを先頭に追加します。IE7 で互換性がある限り、IE8 でも互換性があります

2 .flaot 浮動小数点は IE6 で二重マージンの問題を引き起こします。これは最も一般的であり、
margin-left:10px ! important;/*IE7、IE8、FF は 10PX* のように解決するのが最善です。 /;
margin -left:5px;/*IE6で記述した属性は5PXですが、10pxで表示されます

3. ブロック作成後のフローティングによるブロックを解消できます。 DIV の背景は色または絵で塗りつぶされます。 場合によっては、背景が切断されたり、わずかに変化したりすることがあります。この種の互換性は、これまでに 2 回しか発生していません。その方法は、中国語で互換性のある DIV が表示される場所に、display: block またはその他の属性を記述することです。 . 私は英語が苦手ですが、目的の効果を達成できます。6 e" Z+ e% |8 G# |

4。多くの友人が DIV+CSS を使用するときに表示されます。IE のいくつかのブラウザーでは正常に動作しますが、 FF 問題は、! important を使用すると IE7 と互換性がなくなるということで、これは頭の痛い問題です。私はこの方法を使用しましたが、うまく機能しなかったと感じています。 *、&、￥、#、@、?、+ などの記号を属性の前に追加します。記号を含む属性は IE ブラウザーでのみ認識されますが、FF では認識されません。方法は次のとおりです。署名付き属性と署名なし属性の間。 Order)
height:100px;/*FF では高さ 100 を表示*/
+height:120px;/*IE678 では高さ 120 を表示*/

5. DIV がフロートされている場合、次の DIV は本来は下に表示されるはずでしたが、最終的には先頭に移動してしまいます。この状況は通常、FF で発生します。解決策は、フロートをクリアして、設定されている DIV の下に 1 つを追加することです。 DIV を float にするには、CSS に次のように Clear:both; を記述します

< ;div style="height:100px; width=300px">

6. 次に、この問題は初心者の間でよく発生しますが、ボックス モデルをよく理解していないことが原因です。ボックス モデルを覚えてください。ゲーム内でページがそうでないことがわかった場合、いくつかの理由があることがわかりました。 1. 1 つは、すべての DIV を含む BODY の後の大きな DIV であるボックスがないことです。あなたはそれを書きましたが、幅はそうではありません。 代わりに、絶対幅を使用する必要があります。 -

7.デザイン中の IE6、IE7、および FF。たとえば、背景は IE6 では赤、FF では青、IE7 では緑になります。ここでは、私が実際に試してみましたが、互換性のある方法を使用して動作しました (順序に注意してください)。よくわかります） 7 L& t- o7 k- a1 I

background:red ;/*FF では赤表示*/
+background:blue !重要;/*IE7 では青表示*/
+background:green ;/*IE6 では緑色が表示*/

ここで、私が欲しいのですが、互換性はあなたに多くの憂鬱をもたらし、人々を動揺させますが、同時に、それをやりすぎると、互換性があることがわかります最後のエフェクトと同様に、達成するのが難しい多くのエフェクトで満足できる場合があります。そのようなエフェクトに互換性メソッドが必要ない場合は、JS を使用することを考えなければなりません。 FFとIEの違いについて もちろんJSの互換性については勉強していないので分かりません。将来のために、まずは CSS+DIV を学びましょう。

もっとやって、練習して、常にボックスモデルを頭の中に入れておいてください。そうすることで初めて、ボックスモデルを自由に使用できるようになり、それを実行するときにどこに互換性の問題があるのか​​が自然にわかり、最も重要な問題が解決されます。テスト前の一般的な互換性の問題。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：div+css ページの一般的な命名規則のリスト design_html/css_WEB-ITnose次の記事：div+css ページの一般的な命名規則のリスト design_html/css_WEB-ITnose

関連記事

続きを見る

• HTMLの知識のまとめ
• HTMLを早く学ぶ方法
• html xhtml xml の違い
• src 属性と href 属性の違い
• HTML5とCSSの置き換え利用について