画像をfloatしたときにIEで起こる謎の隙間について
例えば、以下のようなとき。
<div id="header">
<div id="headl">
<img src="イメージ名" />
</div>
<div id="headr">
<img src="イメージ名" />
</div>
</div>
この場合、ヘッダーの中に左右のフローとするボックスを設けて画像を入れています。CSSを以下のように記述してみました。
IE6だけでしか謎の隙間が下端には生じません。
最初はてっきりボーダーが悪さをしているのだと思って四苦八苦していましたが、そういえば以前も同じようなことがあったような気が・・・
結果、イメージ属性に原因がありました。
img属性をインライン要素と判断して、vertical-alignをbaselineとして扱ってしまうためです。
これを回避するためには、
img { vertical-align:bottom; }
として、ベースラインを下端にあわせればOK。
何だか変な気もしますが、IEはベースラインを他の要素にあわせようとして探した結果見つからずに隙間を作ってしまうようです。
うーむ、2008年までIE6にしばられるのは厳しいですねえ・・・
と、思ってしまうのはMac使いだからかも(笑)
Posted 12/24/07 by ykamiyama | Filed under: Design Tips
Comments
Add Comment