IE6 の一般的な CSS バグの解決策のいくつか

IE6 の一般的な CSS BUG 処理について

CSS BUG: さまざまなブラウザーでスタイルの解析が一貫していない問題、または CSS スタイルがブラウザーで正しく表示されない問題は CSS BUG と呼ばれます

CSS Hack: css Hack を指します。これらはすべて、CSS コードに対する非公式の個人的な変更、または非公式のパッチであるため、CSS にさまざまなブラウザーでの正しい表示と互換性を持たせるための技術です。

Hack を使用することによるいくつかの副作用: CSS コードの可読性の低下とコードの負担の増加

今日は、IE6 の一般的なバグの解決策をいくつか共有したいと思います:

(1) 画像のギャップ:

a ) div div 内の画像の間にギャップがあります (このバグは IE6 以前のバージョンで発生します)

説明: div に画像を挿入すると、画像は div の下部を 3 ピクセル拡大します

Hack1:

とを一行で書く;

ハック2: をブロック要素に変換し、にステートメントを追加する: display: block;

b) dt、picture gap in li (IE6)

ハック: ステートメントを追加する:表示: ブロック; オーバーフロー: 非表示;

(2)デフォルトの高さ (IE6)

説明: IE6 以下では、一部のブロック要素にはデフォルトの高さ (高さ 18 ピクセルから 22 ピクセル未満) があります

ハック 1: ステートメントを追加します。 the element: font-size:0;

Hack2: 要素に宣言を追加します: overflow: hidden;

(3) Double float (double margin)

説明: IE6 以前のブラウザは float 要素を解析するときに、間違ってエッジ境界に向かって表示を 2 倍にします。

ハック: フローティング要素にステートメントを追加: display: inline;

(4) パーセンテージのバグ

説明: IE6 以下でパーセンテージを解析すると、四捨五入で計算されるため、50% プラス 50% になります。 100 % を超える場合;

ハック: 右側のフローティング要素にステートメントを追加します (右側のフロートをクリアします)

(5) マウス ポインター

説明: カーソルのハンド属性値属性は IE8 以下のブラウザでのみ認識されます。その他のブラウザでは、この宣言はサーバーでは認識されません。 Cursor 属性の pointer 属性値は、IE6 以降およびその他のカーネル ブラウザでこのステートメントを認識します。

ハック: 要素のマウスポインターを手の形に統一したい場合は、次のステートメントを追加する必要があります: Cursor: pointer;

(6) フォーム要素の行の高さが一貫していません

説明: フォームの行の高さが一貫していませんelements;

ハック: フォーム要素に宣言を追加する : float: left;

(7) ボタン要素のデフォルトのサイズは一貫していません

説明: ボタン要素のサイズは、さまざまなブラウザで一貫していません。

ハック 1: 均一のサイズ / (マークでシミュレート);

ハック 2: 入力の周囲にラベルを置き、このラベルにボタンのスタイルを書き込み、入力の境界線と背景色を削除します。ボタンが画像の場合、その画像をボタンの背景として直接使用します。

(8) ブラウザがボタンの境界線を解析するとき、ボタンの内側の境界線も解析され、ボタンのサイズには影響しません。

(9) ブラウザが margin 属性値を解析すると、上下の境界の属性値が一致し、左右が加算されます。