ブラウザーの互換性の問題について話し合い、一般的な CSS バグについて話します (概要)

この章では、ブラウザの互換性の問題と、一般的な CSS のバグについて説明します。必要な方は参考にしていただければ幸いです。

1. 一般的な主流ブラウザ

1. Internet Explorer、Safari、Mozilla Firefox、Google Chrome、Opera、Baidu、360、Sogou、Maxthon

2。 Mosaic / Netscape Navigator (1994-2008) NN

と略称 2. 5 つの主要なブラウザ コア Trident (MSHTML) (Trident; Trident line; Trident harpoon)

Gecko (Gecko)

Presto (rapid)
Webkit (Safari カーネル、Chrome カーネル プロトタイプ、Apple 独自のカーネルであり、Apple の Safari ブラウザで使用されるカーネル)
Blink (Google と Opera Software によって開発されたブラウザ レイアウト エンジン)。

5大ブラウザカーネルの代表的な3作品*Trident: IE、Maxthon、Tencent、Theworld、360 Browser

代表的なものは IE であり、Windows にバンドルされているため、IE カーネルまたは MSHTML とも呼ばれ、オープンソースではありません。

*Gecko: 代表作である Mozilla Firefox はオープンソースであり、クロスプラットフォームであり、Microsoft Windows、Linux、MacOS X などの主要なオペレーティング システムで実行できることが最大の利点です。

*Webkit: SafariとChromeの代表的な作品はオープンソースプロジェクトです。

*Presto：代表作Opera、PrestoはOpera Softwareが開発したブラウザレイアウトエンジンです。世界最速のレンダリング エンジンとしても認められています。

*Blink: Google と Opera Software によって開発され、2013 年 4 月にリリースされたブラウザ レイアウト エンジン。

4. ブラウザの互換性の問題はなぜ発生しますか? 主要な主流ブラウザは異なるメーカーによって開発されているため、使用されるコア アーキテクチャとコードを複製するのが難しく、あらゆる種類の説明不能なバグ (コード エラー) の温床となります。大手メーカーが自社の利益を考慮して設けたさまざまな技術的障壁も相まって、CSS の適用は想像以上に面倒です。ブラウザの互換性の問題は、私たちが克服しなければならない問題です。

CSS バグ、CSS ハックとフィルター

1. CSS バグ:

さまざまなブラウザーで CSS スタイルの解析に一貫性がない問題、または CSS スタイルがブラウザーで正しく表示されない問題は、CSS バグ

2 と呼ばれます。 CSS では、ハックとは、さまざまなブラウザーで CSS を正しく表示できるようにするテクニックを指します。これらはすべて、CSS コードに対する非公式の個人的な変更、または非公式のパッチであるためです。この動作を説明するためにパッチを使用することを好む人もいます。

3. フィルター:
フィルターとは、特定のブラウザーまたはブラウザー グループのルールまたはステートメントを表示または非表示にする方法です。基本的に、フィルターは、さまざまなブラウザーをフィルターするために使用されるハックの一種です。

5. Hack の使用によるいくつかの副作用

により、CSS コードの可読性が低下し、コードの負担が増加します。

CSS ハックとフィルターを設計するには通常 2 つの方法があります:

1) 1 つは、ブラウザー独自のバグを使用してスタイルやステートメントを非表示または表示する方法です。 2) もう 1 つは、特定のルールや構文がサポートされていないなど、ブラウザの不完全な CSS サポートを利用して、スタイルを非表示または表示することです。

6. よくあるCSSのバグ

1. 写真に枠線があるバグ IE に画像を追加すると、境界線が表示されます。

div に画像のギャップを追加します。 説明: 画像を div に挿入すると、画像は div の下部を約 3 ピクセル拡大します。

ハック 1: と を 1 行に書きます
Hack2: ブロック要素に変換し、次のステートメントを追加します。 ハック: ブロック要素に変換し、ステートメントを追加します: display:block;

3. Double float (double margin) (IE6 のみに表示されます)

説明: Ie6 以前のブラウザがフローティング要素を解析すると、フローティング マージンが誤って 2 倍になります。

ハック: フローティング要素に宣言を追加します: display:inline

4. デフォルトの高さ (IE6、IE7)
説明: IE6 以前では、一部のブロック要素の高さはデフォルト (約 16 ピクセル;) です

ハック 1: 要素に宣言を追加します: font-size:0;

ハック 2: 要素にステートメントを追加します: overflow:hidden;

5. フォーム要素の行の高さの調整が一貫していません
説明: フォーム要素の行の高さの調整が一貫していません
ハック: フォーム要素にステートメントを追加します: float:left;

6. ボタン要素のデフォルトのサイズは異なります
説明: さまざまなブラウザーのボタン要素のサイズが一致していません
ハック1: 均一なサイズ/(マークでシミュレート)
Hack2: 入力の外側にラベルを置き、このラベルにボタンのスタイルを記述し、入力の境界線を削除します。
ハック 3: ボタンが画像の場合は、その画像をボタンの背景画像として使用します。

7. パーセントバグ
説明: IE6 以下でパーセンテージを解析すると、四捨五入で計算されるため、50% プラス 50% が 100% を超える状況になります。 (システムの影響もあります)
ハック: 右側のフローティング要素に宣言を追加します:
clear:right; 意味: 右側のフロートをクリアします。 F Clear: LEFT: 左側のフローティングをクリアします
Clear: Both: 両側のフロートをクリアします

8. マウスポインタのバグ

説明: カーソル属性のハンド属性値は IE9 より前のブラウザでのみ認識され、他のブラウザではこのステートメントは認識されません。カーソル属性のポインタ属性値は、IE6.0 以降および他のカーネル ブラウザでは認識されません。
ハック: 要素のマウス ポインターの形状を手の形状に統一すると、
宣言を追加する必要があります:cursor:pointer

9。 他のブラウザと互換性があります 記述方法: opacity:value; (value の値の範囲は 0-1; 例: opacity:0.5; )

IE ブラウザの記述方法: filter:alpha(opacity=value); 値の範囲 1-100 (整数)

10. 1): 親要素 (li) が float:left を持つ場合、垂直方向のバグが発生します。子要素 (a) が float を設定しない場合、親要素 li と子要素 a の両方に float を設定します。 2): li の a をブロックに変換し、高さと浮動小数点が含まれている場合、li に浮動小数点を同時に追加すると、ラダー表示が表示されます

11。 and down
説明: 現在の要素 (親要素の最初の子要素) と親要素がフロートされていない場合、margin-top を設定した後、誤って親要素に margin-top が追加されてしまいます
CSSハック:

1. overflow:hidden; を親要素に追加します (推奨)

2. 親要素または子要素に float を追加します

12. 2 つの要素が上下に配置されている場合、上の要素は margin-bottom: 30px、下の要素は margin-top: 20px になります。それらの間の距離は重なりませんが、より大きな値に設定されます。

以上がブラウザーの互換性の問題について話し合い、一般的な CSS バグについて話します (概要)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。