IE6 _HTML/Xhtml_Web ページ作成では、イメージ要素 img に冗長な空白が表示されます。

ページ上で DIV CSS レイアウトを実行する場合、IE6 では画像要素 img の下に余分な空白の問題が発生することがよくあります (もちろん、Firefox でも発生する場合があります)。この問題の解決策も「参照」です。ここでは、参考のために、画像レイアウトの下の余分なギャップのバグを解決するための一般的な方法をまとめます。
1. 画像をブロックレベルのオブジェクトに変換します
つまり、img を次のように設定します: display:block;
この例では、一連の CSS コードを追加します。 #sub img {display:block; }
2. 画像の垂直方向の配置を設定します
つまり、画像の垂直方向の配置属性を「top、text-top、bottom、text-bottom」に設定することでも解決できます。たとえば、この例では、一連の CSS コードを追加します: #sub img {vertical-align:top;}
3. 親オブジェクトのテキスト サイズを 0px に設定します
つまり、行を追加します。 #sub: font-size: 0;
で問題を解決できます。しかし、これにより親オブジェクト内のテキストが表示できないという新たな問題も発生しました。テキスト部分がサブオブジェクトで囲まれていても、サブオブジェクトのテキストサイズを設定することで表示できますが、CSS検証時にテキストが小さすぎるというエラーメッセージが表示されます。
4. 親オブジェクトの属性を変更します
親オブジェクトの幅と高さが固定されており、画像サイズが親オブジェクトに依存する場合は、次のように設定できます。問題。たとえば、この例では、次のコードを #sub に追加できます: width:88px;height:31px;overflow:hidden;
5. 画像のフローティング属性を設定します
この例の CSS コード: #sub img {float:left;}
画像とテキストを混合して配置したい場合は、この方法が適しています。
この方法は、実際の開発では問題を引き起こす可能性があることを強調しておきます。コードを記述する際、コードをよりセマンティックかつ明確にするために、IDE を介してコードのインデント表示を提供することが避けられないためです。ラベル DW の「ソース形式の適用」コマンドなど、他のタグとともに新しい行に表示されます。したがって、この方法は、バグが発生する状況を理解するのに役立ち、具体的な解決策を全員で解決する必要があります。