ブラウザーでの CSS の非互換性の問題を解決する

ブラウザーの非互換性は誰もが嫌うはずですが、多くの場合、それを修正するだけで、根本原因を追跡し、同様の非互換性が再び発生するのを避けるという、より重要なことを忘れてしまいます。

いくつかのガイダンスを提供できることを願って、いくつかの HTML コーディング要素を要約したいと思います。
1. テキスト自体のサイズに互換性がありません。 font-size: 14px の同じ Song スタイルのテキストは、ブラウザごとに異なるスペースを占めます。IE では、実際には高さ 16 ピクセル、下マージンで 3 ピクセルを占めますが、FF では実際に高さ 17 ピクセル、上マージンで 1 ピクセルを占めます。下の1px、白3px、オペラの下ではさらに異なります。解決策: テキストの行の高さを設定します。すべてのテキストにデフォルトの行の高さの値があることを確認してください。これは重要です。高さの 1 ピクセルの違いは許容できません。

2. ff ではコンテナの高さが制限されます。つまり、コンテナが高さを定義した後、コンテナの境界線の形状はコンテンツによって拡張されません。ただし、ie ではコンテナの境界線が拡張されます。コンテンツと高さ制限は無効になります。したがって、コンテナの高さを簡単に定義しないでください。

3. コンテンツがコンテナを水平に破壊する問題についても説明しました。 float コンテナに幅が定義されていない場合、ff の下のコンテンツはコンテナの幅を可能な限り拡張し、ie の下ではコンテンツの折り返しが優先されます。したがって、中身が破裂する可能性があるフローティングコンテナは幅を定義する必要があります。

小さな実験: 興味があれば、この実験を見てみることができます。次の各コードをさまざまなブラウザーでテストします。


a.

b.

< /p>

c.

d.

上記のコードは、小さい高さ値 p、

の使用から始まりました。小さな高さの値は、overflow:hidden と一緒に使用する必要があります。この実験は単なる趣味です。私が指摘したいのは、ブラウザーによってコンテナー境界の解釈が大きく異なり、コンテナーのコンテンツの影響が異なるということです。

4. ff の下のフロートをクリアしないと機能しません。

皆さんの誤解を正しておきますが、非互換性に遭遇したときに ff が悪いと言うのは間違いです。実際、私たちを困惑させるのは ie の奇妙な動作のほうです。以下に、ie6 のさまざまな悪行をリストします。

5. 最も嫌われている、二重マージンのバグ。 IE6 でフローティング コンテナーの margin-left または margin-right を定義すると、実際の効果は値の 2 倍になります。解決策は、フローティング コンテナーに対して display:inline を定義することです。

6.mirrormarginのバグ、外側の要素にfloat要素がある場合、外側の要素にmargin-top:14pxが定義されていると、margin-bottom:14pxが自動生成されてしまいます。同様の問題は、IE6 の特殊なパディングでも発生します。この種のバグが発生する状況は、この種の発生条件だけではなく、はるかに複雑であり、体系的に整理されていません。解決策: 外側の要素にボーダーまたはフロートを設定します。

拡張: ff と ie のコンテナーの margin-bottom と padding-bottom の説明が矛盾する場合がありますが、これが関係しているようです。

7. 紙面の都合上、嚥下現象については詳しく説明しません。まだIE6ですが、上のpは背景を設定していますが、背景のない下のpにも背景があることが分かります。上記の背景の飲み込み現象に対応して、スクロール時に枠が欠ける現象もあります。解決策: ズーム:1 を使用します。このズームはie6のバグを解決するために特別に設計されているようです。

8. コメントもバグを引き起こす可能性があります~~~ 「余分な豚。」 これは、IE6 のこのバグの下で、ページ上に豚という単語が 2 回表示されるのがわかります。重複コンテンツの量はコメントの数によって異なります。解決策: コメントを記述するには、「 picRotate start 」メソッドを使用します。

9.

Riga float

、これは典型的で難しい互換性の問題です。ff では li の属性が異なると解釈の影響も異なります。説明は多少は理解できますが、IE6 での説明は混乱を招く可能性があるため、この問題については別の記事で説明します。関連する結果は「ul 使用体験」の記事にありますが、問題を解決するプロセスは示されていません。

10. 「float:left;display:inline」を使用した ul の奇妙な動作。この CSS は、ie6 での二重マージンのバグに対応して、display:inline に追加されていることがわかります。これは、私の CSS システムの重要な部分でもあります。これについては、「ul の使用経験」の記事で説明しています。そして、この CSS を UL で使用すると悲惨な結果になります。とりあえずここではこれ以上は言えません。

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