(経験) 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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最高のグラフィック設定

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション

2週間前 By DDD

R.E.P.O.誰も聞こえない場合はオーディオを修正する方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.チャットコマンドとそれらの使用方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7532

15

CakePHP チュートリアル

1379

52

Steamのアカウント名の形式は何ですか

82

11

Win11 Activation Key Permanent

55

19

NYTの接続はヒントと回答です

21

84

もっと見る