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

フロントエンド 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 を使用できます。

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

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

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

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

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 サイトの他の関連記事を参照してください。