ブラウザの互換性を解決するためのヒント

フロントエンド Web ページを開発し、ページの CSS スタイルを作成するとき、設計および開発したフロントエンド ページがさまざまなブラウザーで正常に表示できるように、さまざまなブラウザーの互換性の問題を考慮する必要があることがよくあります。この章では、ブラウザの互換性を解決するためのヒントをいくつか紹介します。必要な場合は参考にしてください。

1. Chromeでは、12pxより小さいテキストフォントはデフォルトで12pxとして表示され、Chromeが12pxより小さいフォントをサポートできるようになります

box{ font-size: 8px; -webkit-text-size-adjust: none;}

ただし、上記の方法はchrome27では利用できなくなります。しかし、css3 を使用してこの問題を解決できます

box{ font-size: 12px; -webkit-transform: scale(0.75);}

2. 異なるブラウザーでは、タグのデフォルトの外側パッチと内側パッチが異なり、スタイル制御なしでいくつかのタグを記述するだけで、それぞれのマージンとパディングがまったく異なります。 、遭遇頻度: 100%

解決策:

* {margin:0;padding:0;}

注: これは、ブラウザ互換性の問題の中で最も一般的で、最も簡単に解決できる問題です。ワイルドカードは、各タグの内側と外側を設定するために、ほぼすべての CSS ファイルの先頭で使用されます。パッチは0です。

3. ie6、ie7、および Aoyou では、より小さい高さのラベルを設定します。

問題の症状: ie6、7 でのこのラベルの高さ。 、Aoyou は制御されておらず、自分の高さを超えています

遭遇頻度: 60%

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

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

4. 画像にはデフォルトで間隔が設定されています

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

遭遇確率: 20%

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

注: img タグはインライン属性タグであるため、コンテナの幅を超えない限り、 imgタグは一列に並びますが、ブラウザのimgタグの間にはスペースが入ることがあります。このスペースを削除して float を使用するのが正しい方法です

5. ラベルの最小高さの設定 min-height は互換性がありません

問題の症状: min-height 自体は互換性のない CSS 属性であるため、これを設定することはできませんmin-height を設定すると適切に設定されます さまざまなブラウザと互換性があります

遭遇確率: 5%

解決策: ラベルの最小高さを 200px に設定したい場合、行う必要がある設定は次のとおりです:

{min-height:200px; height:auto !important; height:200px; overflow:visible;}

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

6. Const の問題

説明: Firefox では、const キーワードまたは var キーワードを使用して定数を定義できます。

IE では、var キーワードのみを使用して定数を定義できます。 : 定数を定義するには、一律に var キーワードを使用します

7. window.location.href の問題

注: IE または Firefox2.0.x では、window.location または window.location.href を使用できます。

Firefox1.5.x では、window.location. のみを使用できます

解決策: window.location.href の代わりに window.location を使用します

8 ul リストと ol リストのインデントの問題を解決します

。

ul や ol などのリストをインデントする場合、スタイルは次のように記述する必要があります:

list-style:none;margin:0px;padding:0px;

IE では margin:0px を設定すると、上下左右のインデント、空白、リストを削除できることが確認されていますパディングの設定はスタイルには影響しません。 影響: Firefox では、margin:0px を設定すると上部と下部のスペースのみが削除され、padding:0px を設定すると左右のインデントのみが削除されます。 list-style:none を設定すると、リスト番号またはドットが削除されます。つまり、IE では最終的な効果を得るために margin:0px のみを設定できますが、Firefox では最終的な効果を得るために margin:0px、padding:0px、list-style:none を同時に設定する必要があります。

9. IEと幅と高さの問題

IEはmin-の定義を認識しませんが、実際には通常の幅と高さをあたかもminがあるかのように扱います。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さはまったく設定されません。 IEの下で。

たとえば、背景画像を設定したい場合は、この幅の方が重要です。この問題を解決するには、次のようにします。

box{ width: 80px; height: 35px;}html>body #box{ width: auto;height: auto; min-width: 80px; min-height: 35px;}

10. ページの最小幅

前の問題と同様、IE は最小幅を認識しないため、次の方法を使用できます。 :

container{ min-width: 600px;width:expression(document.body.clientWidth＜600? "600px": "auto" );}

最初の min-width は通常ですが、2 行目の幅は IE でのみ認識される Javascript を使用するため、HTML ドキュメントの形式が緩和されます。実際にはJavaScriptの判断により最小幅を実装しています。

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