CSS における IE ブラウザの最も基本的なバグと解決策のいくつか

CSS のバグを解決するにはどうすればよいですか? IE ブラウザの CSS に触れたばかりの友人の中には、このような疑問を持つ人も多いと思います。この章では、CSS における IE ブラウザの最も基本的なバグと解決策のいくつかを紹介します。困っている友人は参考にしていただければ幸いです。

1. IE6 の二重マージンのバグ

ページ上の要素が左にあるかどうかにかかわらず、float を使用する場合または右に浮動します。要素にマージン ピクセルがある限り、値は 2 倍されます (例: "margin-left:10px")。IE6 では、値は 20px として解析されます。このバグを解決するには、要素にdisplay:inlineまたはdisplay:blockを追加し、その要素の種類を明確にして二重マージンのバグを解決する必要があります。

2. IE6 の 3 ピクセルの問題と解決策

float を使用して要素を浮動表示すると、要素と隣接する要素の間に 3 ピクセルの隙間が生じます。奇妙なのは、右側のコンテナの高さが設定されていない場合、高さを設定すると、3 ピクセルの隙間がコンテナの反対側に移動してしまうことです。この種のバグを解決するには、同じ行に配置されたすべての要素に float を追加する必要があります。

3. IE6 の奇数の幅と高さのバグ

IE6 の奇数の高さと幅の表示サイズには一定の違いがあります。高さと幅の偶数番目の表示サイズ。主な問題は、高さと幅が奇妙であることです。この種の問題を解決するには、外部に配置された div の高さと幅を偶数として記述してみてください。

4. IE6 では画像リンクの下に隙間があります。

#IE6 では、特に画像が縦方向に隣接している場合に、画像の下に一定の隙間が生じます。写真、つまり、このギャップがわかります。このような問題を解決するには、imgタグをdisplay:blockとして定義するか、vertical-alignに相当する属性を定義する必要があります。 img 5 に対応するスタイルに font-size:0

と記述することもできます。IE6 のバグ

にコンテンツがない場合の空要素の高さ。スタイルでこの要素の高さを 0 ～ 19px に設定するときの要素。この要素の高さは常に 19 ピクセルです。

解決策は 4 つあります:

1. 要素の css に overflow:hidden を追加します:

3. 要素に HTML の空白を挿入します:  

4. 要素の CSS に追加します: font-size:0

6. 繰り返されるバグtext

一部のより複雑なレイアウトでは、フローティング要素の最後の文字がクリア要素の下に表示されることがあります。

解決策は次のとおりです:

1. すべての要素に display:inline

があることを確認します。2. 最後に「margin-right:-3px

」を使用します。要素

3. フローティング要素の最後の項目に条件付きコメントを追加します (xxx

4)。コンテナの最後の要素として空の div を使用します。 、この場合、指定された div はコンテナーの幅を超えません。

7 IE6 では Z-index が失敗します。具体的なバグは、z-index です。要素の親要素の z-index が 1 に設定されている場合、その子要素の z-index は無効になり、そのレベルは親要素の設定を継承するため、レベル調整のバグが発生します。実際、IE6 には多くのバグがあり、display:inline、font-size:0、および float を使用することで解決できます。そのため、コードを作成するときは、float を使用したら、display:inline スタイルを追加することを覚えておく必要があります。これにより、スタイルの混乱を効果的に回避できます。空の DIV を使用する場合、その高さがレイアウトの美しさに影響するのを防ぐために、それに font-size:0 を追加することもできます。

上記は CSS に関するもので、IE ブラウザの最も基本的なバグとその解決策について詳しく説明しています。CSS ビデオ チュートリアル、PHP 中国語 Web サイト

## に注意してください。

以上がCSS における IE ブラウザの最も基本的なバグと解決策のいくつかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。