ページのDiv+CSSレイアウトの場合、IE6に遭遇したときにブラウザ内の画像要素IMGの追加ブランクの問題に遭遇することが絶対に一般的です(もちろん、Firefoxで発生することもあります)。この問題の解決策も時間の問題です。さまざまな理由に従って、さまざまなソリューションを使用する必要があります。ここでは、参照のための画像レイアウトの下にある余分なギャップでバグを解決する一般的な方法を要約します。
1.画像をブロックレベルのオブジェクトに変換します
つまり、IMGを次のように設定してください:display:block;
この例では、cssコードのセットを追加します:#sub img {display:block;}
2.画像の垂直アライメントを設定します
つまり、画像の垂直アライメント属性を上部、テキストトップ、ボトム、およびテキストボトムに設定することも解決できます。たとえば、この例でCSSコードのセットを追加します。#sub img {vertical-align:top;}
3.親オブジェクトのテキストサイズを0pxに設定します
つまり、#sub:font-size:0に行を追加します。
問題を解決できます。しかし、これは新しい問題も提起し、親オブジェクトのテキストでさえ表示することはできません。テキスト部分が囲まれていても、サブオブジェクトのテキストサイズを引き続き表示できますが、CSSが検証されたときに小さなテキストのエラーが促されます。
4.親オブジェクトのプロパティを変更します
親オブジェクトの幅と高さが固定され、画像サイズが親オブジェクトに依存する場合、次のように設定できます。オーバーフロー:hidden;
解決しましょう。この例と同様に、次のコードを#sub:width:88px; height:31px; overflow:hidden;に追加できます。
5.画像の浮動特性を設定します
つまり、この例でCSSコードの行を追加します:#sub img {float:left;}
さまざまな画像とテキストの配置を実現したい場合は、この方法が良い選択です。
この方法は、実際の開発では、この方法がカオスを引き起こす可能性があることを強調する必要があります。なぜなら、コードをよりセマンティックで階層的にするためには、IDEを介してコードインデント表示を提供することは避けられないため、DWのソースフォーマットコマンドの適用など、ラベルやその他のラベルをラインで表示できるようにする必要があります。したがって、この方法は、バグが発生する状況を理解するのに役立ち、特定のソリューションでそれに対処する必要があります。