DIV+CSS typesetting_html/css_WEB-ITnose 時の img 画像要素下の余分な空白スペースを解決する方法

ページで DIV+CSS 組版を行う場合、IE6 の画像要素 img の下に余分な空白の問題が発生するのはよくあることです (もちろん、Firefox でも発生することがあります)。この問題の解決策は次のとおりです。 「状況に応じて行動する」、さまざまな理由に応じてさまざまな解決策を使用する必要があります。ここでは、参考のために画像レイアウトの下の余分なギャップのバグを解決する一般的な方法を直接まとめます。この方法は Wanfu のネットワークからまとめられています。

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. 親オブジェクトのプロパティを変更します

親オブジェクトの幅と高さが固定されており、画像サイズが親オブジェクトに依存する場合は、次のように設定できます:

overflow:hidden;
問題を解決します。たとえば、この例では、次のコードを #sub に追加できます:

width:88px;height:31px;overflow:hidden;
5. 画像のフローティング属性を設定します

この例では、行を追加します。 CSS コード:

# sub img {float:left;}

画像とテキストを混合して配置したい場合は、この方法が良い選択です。

6. 画像タグとその親オブジェクトの最後の終了タグの間のスペースをキャンセルします。

実際の開発では、この方法は問題を引き起こす可能性があります。コードを記述するときにコードをよりセマンティックかつ明確にするために、IDE を介してコードのインデント表示を提供することが避けられず、ラベルが作成されるためです。 DW の「ソース形式の適用」コマンドなど、他のラベルは新しい行に表示されます。したがって、この方法は、バグが発生する状況を理解するのに役立ち、具体的な解決策を全員で解決する必要があります。