ホームページ > 記事 > ウェブフロントエンド > 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 属性値を解析すると、上下の境界の属性値が一致し、左右が加算されます。