CSS ブラウザの互換性の問題を解決する方法のまとめ

CSS とブラウザーの互換性は時々頭を悩ませることがあるかもしれませんが、テクニックと原則を理解すれば、それが難しいことではないことがわかるでしょう。IE7、6、Fireofx の互換性方法をインターネットから集めて整理しました。 . Web2.0 への移行には、XHTML 形式でコードを記述するようにしてください。DOCTYPE は W3C 標準として、

CSS のヒント

を追加する必要があります。

1.p 垂直方向の中央揃えの問題垂直方向の中央揃えになります。欠点は、ラップせずにコンテンツを制御する必要があることです。

2. マージンを 2 倍にする問題 p を float に設定すると、IE で設定されたマージンが 2 倍になります。これはie6に存在するバグです。解決策は、この p に display:inline; を追加することです。例: 84057918645a6d89f6b5fbc0e75598f7 対応する CSS は、IE では #IamFloat{ float:left; as 10px*/ display:inline;/*IE では 5px*/} として認識されます

3. フローティング IE によって生成される倍精度の距離 #box{ float:left:100px; //この場合、IE は 200px の距離を生成します。 display:inline; //ignore float} 2 つの要素 block と inline について詳しく説明します。 block 要素の特徴は、常に新しい行で始まることです。高さ、幅、行の高さ、および辺で制御できます (ブロック要素)。インライン要素の特徴は、他の要素と同じ線上にあり、制御できないことです (インライン要素)。 :block; //インライン要素のブロック要素表示としてシミュレート可能 :inline; //同じ行に配置する効果を実現

4 IE と幅と高さの問題 IE が定義を認識しないmin- の場合ですが、実際には通常の幅と高さを min make の場合として扱います。これは大きな問題になります。幅と高さだけを使用する場合、通常のブラウザでは幅と高さはまったく設定されません。 IEの下で。 たとえば、背景画像を設定する場合は、この幅がより重要になります。この問題を解決するには、次のようにします: #box{ width: 80px; height: 35px;}html>body #box{ width: auto; min-height: 35px;}
5 .ページの最小幅 min -width は、レイアウトが常に正しいことを保証するために、要素の最小幅が特定の幅未満にならないように指定できる非常に便利な CSS コマンドです。しかし、IE はこれを認識せず、実際には幅を最小幅として扱います。このコマンドを IE で機能させるには、6c04bd5ca3fcae76e30b72ad730ca86d タグの下に e388a4556c0f65e1904146cc1a846bee を配置し、p にクラスを指定して、次のように CSS を設計します。 width :expression(document.body.clientWidth da6c7979560a7329d883c15cea69a688 2002cd5e929bcead2f145f8ff44c808e 94b3e26ee717c64999d7867364b1b4a3
7. IE かくれんぼ問題 各列にリンクがあり複雑になると、かくれんぼ問題が発生しやすくなります。 一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。 解決策: #layout の line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。

8. float の p クロージャ; 適応高さ; e874acc1d87dcc94f4e38d2310d52545ce89d2e8d7b032654f6c53c9d59b55066319bb0a3ad5b4f613340a36f6ab876eたとえば、次のようにします。 3 つの列すべての背景色を青にするという目的を達成するために、ページの背景を青にしましたが、左中央右が下に伸びるにつれて、ページの高さは変更されずに保存されることがわかります。ここで問題が発生します。理由 問題は、ページが float 属性ではないことです。ページは中央に配置する必要があるため、float に設定できないため、次のように解決する必要があります。75598ae0912b4c03dd28a6ab100b9481 " style="float:left;width :100%"4b4ffd0ec90ac88eb2553cf173b6aaec94b3e26ee717c64999d7867364b1b4a3

94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3 次に問題を解決するために、幅が 100% の p を埋め込みます

④ の原理についてfloat をクリアするには、[構造マークアップを使用せずにフロートをクリアする方法] を参照して、グローバル CSS に次のコードを追加し、閉じる必要がある p に class="clearfix" を追加します。 /* Clear Fix */ を繰り返し実行します。 .clearfix:after { content:"."; 表示:ブロック; クリア:両方; } .clearfix { 表示: inline-block } /* IE Mac から非表示にする */ .clearfix :block;} /* IE Mac からの非表示終了 */ /* clearfix の終了 */ または次のように設定します: .hackbox{ display:table; // オブジェクトをブロック要素レベルでテーブルとして表示します

11.高さ非適応 高さ非適応は、特に内部オブジェクトがマージンまたはパディングを使用している場合、内部オブジェクトの高さが変更された場合の外側のレイヤーの高さです。 例: #box { } #box p {margin-top: 20px;margin-bottom: 20px; } 753396aab491b64ee4772d02f5086612p< 94b3e26ee717c64999d7867364b1b4a3 解決策: P オブジェクトの CSS コード: .1{height:0px;overflow:hidden;} の上下に 2 つの空の p オブジェクトを追加するか、p に border 属性を追加します。

12. IE6 で画像の下に隙間があるのはなぜですか? このバグを解決するには、HTML のレイアウトを変更するか、img を display:block に設定するか、vertical-align 属性を垂直に設定することができます。 -align:top |bottom |middle |text-bottom

13.

以上がCSS ブラウザの互換性の問題を解決する方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。