IE6では画像要素imgに余分な空白スペースがある

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