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

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

CSS のヒント

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

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

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

対応する 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 で機能させるには、 タグの下に

を配置し、p にクラスを指定して、次のように CSS を設計します。 width :expression(document.body.clientWidth < 600? "600px": "auto" );} 最初の min-width は通常ですが、2 行目の幅は IE でのみ認識される Javascript を使用します。これにより、HTML ドキュメントが形式的ではなくなります。実際にはJavaScriptの判断により最小幅を実装しています。

6.p フローティング IE テキストにより 3 ピクセルのバグが発生します。左側のオブジェクトはフローティングで、右側は外側のパッチの左マージンを使用して配置されます。右側のオブジェクトのテキストは左側から 3 ピクセル離れています。 #box{ float:left; width: 800px;} #left{ float:left; width:50%;} #right{ width:50%;} //この文はキーです}

7. IE かくれんぼ問題 各列にリンクがあり複雑になると、かくれんぼ問題が発生しやすくなります。 一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。 解決策: #layout の line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。

8. float の p クロージャ; 適応高さ; <#p id="floatA" ><#p id="floatB" ><#p id=" NOTfloatC ” > ここでの NOTfloatC は、翻訳を続行することを望んでいませんが、下方に移動したいと考えています。 (floatAとfloatBの属性はfloat:leftに設定されています;) このコードはIEでは問題ありませんが、問題はFFにあります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。この p の位置に注意してください。 2 つと一致している必要があります。 float 属性を持つ p 兄弟間にネストされた関係は存在できません。そうでない場合は、例外が発生します。 そして、clear スタイルを次のように定義します: .clear{ clear:both;}

② 外部ラッパーとして、p の高さを設定しないでください。高さを自動的に適応させるために、ラッパーに overflow: hidden を追加します。 ; フロートを含むボックスが使用される場合、IE では高さの自動調整が無効になります (邪悪な IE!) 互換性を実現するには、zoom:1; を使用します。 たとえば、ラッパーは次のように定義されます: .colwrapper{ overflow:hidden; margin:5px auto;}③植字の場合、最もよく使用する CSS 記述はおそらく float:left です。場合によっては、列 n の float p の後ろに統一された背景を作成する必要があります。たとえば、

たとえば、次のようにします。 3 つの列すべての背景色を青にするという目的を達成するために、ページの背景を青にしましたが、左中央右が下に伸びるにつれて、ページの高さは変更されずに保存されることがわかります。ここで問題が発生します。理由 問題は、ページが float 属性ではないことです。ページは中央に配置する必要があるため、float に設定できないため、次のように解決する必要があります。

" style="float:left;width :100%"

”right”>

次に問題を解決するために、幅が 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; }

p<

解決策: 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.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

/* intLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]> */

13. IE6 ではコンテナの幅が FF と異なるのはなぜですか? " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> style type="text/css">問題の違いは、Firefox を IE と互換性のあるものにするかどうかです。ここで、IE6 はそれを 200PX として解釈し、FF は 220PX として解釈します。問題の正確な原因は何でしょうか。コンテナーの先頭にある xml を削除すると、先頭にあるステートメントが IE の qurks モードをトリガーすることがわかります。qurks モードと標準モードに関する関連情報については、http:// を参照してください。 www.microsoft.com/china /msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true

IE6、IE7、FF IE7.0 がリリースされ、CSS サポートに新たな問題が発生しました。ブラウザの数が増え、Web ページの互換性が悪化しています。IE7.0 の互換性の問題を解決するために、次の記事を見つけました。 firefox テストは正常に表示できますが、ie7 では !payment を正しく解釈できるため、ページが必要どおりに表示されません。以下は 3 つのブラウザの互換性をまとめたものです

1 つ目は CSS HACK メソッドです。 /*For Firefox*/ *height:25px; /*For IE7 & IE6*/ _height:20px; IE6*の場合/順序に注意してください。 これも CSS HACK ですが、上記ほど単純ではありません。 #example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ *+html #example { color: #999; ;!--その他のブラウザ--> IE 6 の場合]

3 番目の方法は、CSS フィルターの方法です。以下は、海外の Web サイトからの古典的な翻訳です。次のように新しい CSS スタイルを作成します: #item { width: 200px; height: 200px; background: red } 新しい p を作成し、以前に定義した CSS スタイルを使用します:

ここにテキストを追加します。 ; /p> ここに lang 属性を本文の式に追加します。中国語は zh です: 次に、p 要素の別のスタイルを定義します: *:lang(en) #item{ :lang セレクターは IE7.0 ではサポートされていないため、IE6.0 では同じ効果が得られません。達成できましたが、これは非常に困難です。残念ながら、Safari もこの属性をサポートしていないため、次の CSS スタイルを追加する必要があります。はこの仕様をサポートしていませんが、この要素が存在するかどうかに関係なく、この要素を選択すると、IE を除くすべてのブラウザで緑色になります。 IE6 と FF との互換性を考慮して、以前の !重要を考慮してください。個人的には、それを使用することを好みます

。

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