1. ホーム
  2. Web制作
  3. HTML/Xhtml

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

2022-01-28 23:40:51

ページのDIV + CSSのレイアウトでは、遭遇IE6(もちろん、時にはFirefoxも時折発生します)冗長な空白の問題の下にブラウザで画像要素imgは、問題の解決策のために絶対に共通ですも&quotです;何が起こるかを参照してください"、異なるソリューションを使用するために、別の理由に応じて、ここで 画像レイアウトバグの下に冗長ギャップを解決する一般的な方法は参考までにここに要約されている。
1、画像をブロックレベルのオブジェクトに変換する。
   つまり、imgに: display:blockを設定します。
   この例のCSSコード一式を追加します。#sub img {display:block;}のようなCSSコードを追加します。  
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. 画像のfloatプロパティを設定する
   つまり、この例のようにCSSのコードを1行追加します。#sub img {float:left;} のようなCSSコードを追加します。
この方法は、テキストとグラフィックの混在を実現したい場合に適しています。
   このメソッドは、順序でコードを書くときに、より意味と階層的な明快さを反映させるために、必然的にIDEを介して、ラベルや他のラベルは、DW"適用ソース形式&quotなどの改行を表示するようになり、コードのインデント表示を提供するために、台無しになるかもしれない、強調する必要がありますコマンドを実行します。ですから、この方法はバグが発生する状況を把握するためには使えますが、具体的な解決策は見てみないとわかりません。