さまざまなブラウザでの互換性の問題の詳細な説明

いわゆるブラウザの互換性の問題とは、異なるブラウザが同じコード部分の解析を異ならせ、ページ表示効果に一貫性がなくなる状況を指します。ほとんどの場合、当社の要件は、ユーザーが当社の Web サイトの閲覧やシステムへのログインにどのブラウザを使用しても、統一された表示効果が得られることです。したがって、ブラウザーの互換性の問題は、フロントエンド開発者が頻繁に遭遇する問題であり、解決する必要があります。

ブラウザの互換性について学ぶ前に、フロントエンド開発者を 2 つのカテゴリに分けたいと思います:

最初のカテゴリ:

は、設計図に従って正確に開発するフロントエンド開発者です。 1px まで正確に言うと、設計図の欠点を簡単に発見できます。また、まれにブラウザの互換性の問題に遭遇することがあります。これらの問題はブラウザのバグによって引き起こされることが多く、作成されたページは後で保守するのが簡単です。コード 再利用の問題も少なく、比較的安定した信頼性の高いコードと言えます。

2 番目のカテゴリ:

は、基本的に設計図面に従って開発するフロントエンド開発者であり、間隔、行の高さ、画像の位置など、多くの場合、数ピクセル異なることがあります。特定の効果の実現も、デバッグを繰り返すことで達成されます。この効果が発生する具体的な理由はまだ不明瞭で、全体的なレイアウトは非常に脆弱です。ほんの少しの変更で混乱が生じます。なぜこのようにコードが書かれているのかわかりません。このような開発者は互換性の問題に悩まされることがよくあります。このブラウザを変更すると、別のブラウザがおかしくなってしまいました。何度も変更しましたが、それでもわかりませんでした。実際、彼らが遭遇した互換性の問題のほとんどはブラウザのせいではなく、彼らのテクノロジー自体のせいであるべきです。

この記事は主に最初のカテゴリーである厳密な開発者を対象としているため、ここでは主にブラウザー解析の違いの観点から互換性の問題を分析します。

方法/手順

ブラウザの互換性の問題 1: ブラウザが異なると、タグのデフォルトの外側パッチと内側パッチが異なります

問題の症状: スタイル制御なしでいくつかのタグを記述するだけで、それぞれのマージンとパディングが大きく異なります。

遭遇頻度: 100%

解決策: CSS *{margin:0;padding:0;}

注: これはブラウザの互換性の問題の中で最も一般的で、解決するのが最も簡単です。ワイルドカード文字 * は、 CSS ファイルの先頭を変更して、各タグの内側と外側のパッチを 0 に設定します。

ブラウザの互換性の問題 2: ブロック属性タグがフロートされ、水平方向のマージンがある後、IE6 で表示されるマージンが設定値より大きくなります

問題の症状: スタイル コントロールを追加せずに、いくつかのタグを記述するだけで、それぞれのマージンとパディングはまったく異なります。

遭遇頻度: 100%

解決策: CSS *{margin:0;padding:0;}

注: これはブラウザの互換性の問題の中で最も一般的で、解決するのが最も簡単です。ワイルドカード文字 * は、 CSS ファイルの先頭を変更して、各タグの内側と外側のパッチを 0 に設定します。

ブラウザの互換性の問題 3: より小さい高さラベルを設定します (通常は 10px 未満)。IE6、IE7、および Aoyou では、高さが設定した高さを超えます。

問題の症状: この高さ。 IE6、7、および Aoyou のラベルが制御されておらず、設定した高さを超えています

遭遇頻度: 60%

解決策: 高さを超えるラベルに対して overflow:hidden を設定するか、行の高さを高さより小さく設定します。あなたが設定した。

注: この状況は通常、小さな丸い角の背景を設定したラベルで発生します。この問題の理由は、IE8 より前のブラウザでは、ラベルにデフォルトの最小行高さが設定されるためです。ラベルが空の場合でも、ラベルの高さはデフォルトの行の高さになります。

ブラウザの互換性の問題 4: インライン属性タグ、display:block の設定後にフロート レイアウトが使用され、水平方向の余白がある、IE6 の間隔のバグ

問題の症状: IE6 の間隔の比率が設定された間隔を超えています

遭遇確率: 20%

解決策: display:inline;display:table; を追加します

備考: インライン属性タグ、幅と高さを設定するには、display:block; を設定する必要があります(input タグは除く)特別）。 float レイアウトと水平マージンを使用した後、IE6 では、ブロック属性 float の後に水平マージンが発生するバグがあります。ただし、それ自体は inline 属性タグであるため、display:inline を追加した場合、高さと幅を設定することはできません。このとき、display:inline の後に display:talbe を追加する必要もあります。

ブラウザの互換性の問題 5: 画像にはデフォルトで間隔が設定されています

問題の症状: 複数の img タグがまとめられると、一部のブラウザではデフォルトの間隔が設定され、質問 1 で述べたワイルドカードの追加も機能しません。

遭遇確率: 20%

解決策: float 属性を使用して img をレイアウトします

注: img タグはインライン属性タグであるため、コンテナの幅を超えない限り、imgタグが連続して配置されますが、ブラウザによってはimgタグの間にスペースが入ってしまいます。このスペースを削除して float を使用するのが正しい方法です。 (私の生徒の一人がネガティブマージンを使用しています。解決可能ではありますが、ネガティブマージン自体がブラウザの互換性の問題を引き起こしやすい使用法なので、使用を禁止します)

ブラウザの互換性の問題 6: ラベルの最小高さ設定 min-height に互換性がありません

問題の症状: min-height 自体が互換性のない CSS プロパティであるため、min-height の設定はさまざまなブラウザで十分に受け入れられません。

遭遇確率: 5%

解決策: ラベルの最小の高さを 200 ピクセルに設定する必要がある場合は、次の設定を行う必要があります: {min-height:200px; 200px; オーバーフロー: 表示;}

注: B/S システムのフロントエンドを開くとき、この必要性が生じる状況が多くあります。コンテンツが値（300px など）より小さい場合。コンテナの高さは 300px です。コンテンツの高さがこの値より大きい場合、スクロール バーが表示されずにコンテナの高さが高くなります。現時点では、この互換性の問題に直面することになります。

ブラウザの互換性の問題 7: 透明性のための互換性のある CSS 設定

互換性のあるページを作成する方法は次のとおりです: 小さなコード (レイアウト内の 1 行またはブロック) を記述するたびに、次のことを確認する必要があります。もちろん、さまざまなブラウザに互換性があります。ある程度のレベルに達していれば、それほど面倒ではありません。互換性の問題が頻繁に発生する初心者にお勧めします。互換性の問題の多くは、ブラウザによるタグのデフォルト属性の解析の違いが原因で発生します。これらの互換性の問題は、少しの設定で簡単に解決できます。タグのデフォルト属性を理解していれば、互換性の問題が発生する理由と、これらの互換性の問題を解決する方法をよりよく理解できます。

/* CSS ハック*/

私はハッカーをほとんど使用しません。おそらく、IE と互換性のないコードを作成してそれを解決するためにハックを使用するのが好きではありません。しかし、ハッカーは依然として非常に使いやすいです。ハッカーを使用すると、ブラウザを 3 つのカテゴリに分類できます: IE6、IE7 と Aoyou、その他 (IE8 chrome ff safari opera など)

◆私が知っている IE6 のハッカーはアンダースコア_とアスタリスクです*

◆ IE7 は Asterisk *

たとえば、これは CSS 設定です:

height:300px; *heihgt も知っているので、IE6 が *height:200px を読み取ると、以前の競合する設定が上書きされ、高さが 200px であると認識されます。続きを読む、IE6 は _height も認識しているため、200 ピクセルの高さ設定を上書きして高さを 100 ピクセルに設定します

IE7 と Aoyou も 300 ピクセルの高さ設定から読み取ります。 _height がわからないため、*height200px を読み取ると停止します。したがって、高さを 200px まで解析し、残りのブラウザは最初の高さ:300px だけを知っているため、高さを 300px まで解析します。同じ優先順位と競合を持つプロパティを設定すると、前のプロパティが上書きされるため、書き込む順序は非常に重要です。

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