ページ上で DIV+CSS 組版を行う場合、IE6 のイメージ要素 img の下に余分な空白の問題が発生するのはよくあることです (もちろん、Firefox でも発生する場合があります)。この問題の解決策も「再生」することです。 「ear」の場合、理由に応じて異なる解決策を使用する必要があります。ここでは、参考のために画像レイアウトの下の余分なギャップのバグを解決する一般的な方法を直接まとめます。
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;」を設定すると問題を解決できます。たとえば、この例では、「width:88px;height:31px;overflow:hidden;」というコードを #sub に追加できます。
5. 画像のフローティング属性を設定するには
、この例では CSS コード「#sub img {float:left;}」の行を追加します。画像とテキストを混在させて配置したい場合は、この方法が適しています。
6. 画像タグとその親オブジェクトの最後の終了タグの間のスペースを削除します。
コードを記述するときにコードをよりセマンティックかつ明確にするために、IDE を介してコードのインデント表示を提供することが避けられず、ラベルやその他のラベルが必然的に表示されるため、この方法は実際の開発で問題を引き起こす可能性があることを強調しておく必要があります。 DWの「ソースフォーマットの適用」コマンドなどの改行表示。したがって、この方法は、バグが発生する状況を理解するのに役立ち、具体的な解決策を全員で解決する必要があります。