CSSブラウザ非互換の原因分析と解決策 ページ1/2_体験交流

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

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

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

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


a.

b.

c. d.

上記のコードはブラウザによって異なります。この実験は、小さな高さ値 div、、高​​さは小さい この値は、overflow:hidden と一緒に使用する必要があります。この実験はただのお楽しみです。私が指摘したいのは、ブラウザーによってコンテナ境界の解釈が大きく異なり、コンテナ コンテンツの影響も異なるということです。

4. フロートのクリア ff ではフロートをクリアすることはできません。

皆さんの誤解を正しておきますが、非互換性が発生したときに ff が悪いと言うのは間違いで、実際には、ie の奇妙な動作によって困惑することがよくあります。以下に、ie6 のさまざまな悪行をリストします。

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

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

拡張子: ff および ie コンテナのmargin-bottomとpadding-bottomの説明が齟齬がある場合があるのですが、それが関係しているようです。

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

8. コメントもバグを引き起こす可能性があります~~~ 「余分な豚。」 これは、IE6 のこのバグを要約するために以前の人が使用したコピーです。 次に、ページ上に pig という単語が 2 回表示され、コメントの数に応じて繰り返されるコンテンツの量が変化します。解決策: 「 picRotate start」を使用します。 」メソッドを使用してコメントを記述します。

9.

に float を追加します。

、これは典型的で難しい互換性の問題です。皆さんも注意して対処していただければ幸いです。 属性が異なると解釈効果も異なります。ff での説明は少し理解できますが、ie6 での説明では混乱するでしょう。問題が複雑なため、この問題については別の記事で説明します。関連する結果は「ul 使用体験」の記事にありますが、問題を解決するプロセスは示されていません。

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

11.img の下のスペースは空白です。このコードの何が問題なのか見てみましょう:

div の境界線を開くと、画像の下部がコンテナの下部に近くないことがわかります。これは、画像の後ろにある空白文字が原因です。 img. それを解消するには、次のように書く必要があります

最後の 2 つのタグは隣り合っている必要があります。このバグはie7でもまだ存在します。解決策: display:block を img に設定します。

12. 行の高さを失います。

text

. 残念ながら、IE6 では単一行テキストの行高効果が消えてしまいます。 。 。 、理由は は inline 要素と一緒に記述されます。解決策: img と text の両方をフロートにします。

拡張子: 誰もが知っています img 配置には、text-top、middle、absmiddle などが含まれます。画像を調整してみてください。 IE や FF のテキストと一貫性を持たせると、どんなに調整しても満足できないことがわかります。 img と text を浮かせてマージンを調整するだけです。

13. リンクのホバー ステータス。 a:ホバー画像{幅:300px} マウスホバー時にリンクに含まれる画像の幅を変更したいのですが、残念ながら、ie6 では無効で、ie7 と ff では有効です。

14. リンクされていないホバー状態。 div:hover{} スタイルは IE6 では認識されず、IE7 と FF でのみ機能します。

15. ブロックされたリンクの内部には絶対レイヤーがあり、その絶対レイヤーに img が配置されます。IE では、img をマウスでクリックしてもリンク効果はありませんが、通常の動作になります。 FFとopの下で。

思いつかないので、後で追加したいと思います。上記の問題の多くの秘密をマスターすれば、非互換性の問題の 90% には新たな CSS ハックは必要ありません。

16. 完全にクリアできないフロート。 ulの下のliがfloat属性を持っている場合、floating liをクリアするにはどうすればよいですか?

または

• class=”c”>

または

• class=”c”>

または

class=”c”>

それとも上記の組み合わせでしょうか？この質問には答えられません。これに関連する例を次に示します。

//W3C//DTD XHTML 1.0 移行版//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

• sfsdfsfdf


• sfsdfsfdf

sfsdfsfdf

ie でテストしてください。変更するだけです。 margin-top:19px が margin-top:20px に変更されました あなたは何を見つけましたか？要素: doctype が存在する必要があります、margin-top:19px は ie6 および ie7 では問題ありません、margin-top:20px 何か問題が発生しましたが、説明できません。 。 。テストのためにクリアレイヤーを別の位置に変更することもできます。

解決策: ul 属性にzoom:1を与えます(liにzoom:1を追加しても無駄です)

エクステンション: クリア層は単独で使用してください。コードを節約するために、下のコンテンツ レイヤーにクリア属性を直接配置している可能性があります。これは問題です。ff と op ではマージン効果が失われるだけでなく、一部のマージン値は ie でも無効になります。

dd

ff

17.ie の overflow:hidden では、絶対レイヤー位置:absolute または相対レイヤー位置:relative では無効です。解決策: Position:relative または Position:absolute を overflow:hidden に追加します。さらに、ie6 は overflow-x または overflow-y 機能をサポートしますが、ie7 と ff はサポートしません。

18.ie6 での深刻なバグ。float 要素に幅が定義されておらず、高さまたはズームを定義する div が内部にある場合: 1 であっても、div は行全体を埋めます。幅を与えます。 float 要素をレイアウトまたは複雑なコンテナとして使用する場合は、幅を指定する必要があります。

19.ie6 のバグ、絶対的に配置された div には相対的に配置された div が含まれます。内層の相対的に配置された div の高さに特定の高さの値が指定されている場合、内層の相対層は幅の値が 100% になると、外側の絶対レイヤーが引き伸ばされます。解決策は、内側の層に相対層の float 属性を与えることです。

20.ie6 でのバグ、 には の場合、position:relativeレイヤー以下のfloatレイヤーのテキストは選択できません。このバグにより、共通スタイル ライブラリを修正する必要がありました。

21. 最後に、ff の欠点があります。 width:100%はIEで使うと非常に便利で、フローティングレイヤーの影響を無視して上方向にレイヤーごとに幅の値を検索し、ffの下をフローティングレイヤーの最後まで検索します。中央のすべての浮遊レイヤーに width: 100% を追加するだけです。 Opera はこれをよく学び、ie に従いました。