グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

今更な感じですが、IE6でのレイアウト崩れについてです。

＜div＞や＜img＞などの要素を縦に並べたとき、余計な隙間ができてしまうことがあります。場合によって原因は変わってくると思いますが、起こりやすそうなものを書いてみます。

横幅にぴったりな＜img＞の下の隙間


＜img＞タグで親の横幅にぴったりな画像を入れている場合、直下の要素との間が空いてしまうことがあります。
これは、＜img＞と要素の間の改行が原因であることが多いです。

＜div＞
　＜img src="xxxxx"＞
　＜div＞
　コンテンツ
　＜/div＞
＜/div＞

コードを見やすくするために改行したいものですが、改行は半角スペースに変換されてしまうため、横幅に納まりきらず縦に伸びてしまいます。

こういう場合は＜img＞タグ後の改行をとってしまうか、＜img＞タグの後ろに＜br /＞タグを入れれば解決できます。

＜div＞
　＜img src="xxxxx"＞＜br /＞
　＜div＞
　コンテンツ
　＜/div＞
＜/div＞

こんな感じです。



縦細の＜div＞の下にできる隙間


縦幅の狭い＜div＞などを使っている場合、下に余計な余白がでることがあります。
これは、指定した height よりも文字サイズ＋行間が大きいことが原因です。
厄介なのは、要素内にテキストを入れてなくても起こること・・
パッと見て、文字サイズが問題だと気付きにくいです。

スタイルで font-size や line-height を指定して、＜div＞の height よりも小さくしてあげれば直ると思います。
09/6/24
後に別の記事でも書いていますが、スタイルに「overflow:hidden; 」を設定することでも解決できるようです。
文字サイズでも間違いではないですが、あまり小さくするとスパム扱いされてしまう場合があるようです・・。