Skip to main content.

Wintryblasts Blog

画像をfloatしたときにIEで起こる謎の隙間について

インターネットエクスプローラー6.0で、フロートを使ったdivの中に画像を入れた場合に何故か少しだけ、ずれが生じることがあります。

例えば、以下のようなとき。

<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使いだからかも(笑)

Comments

No comments yet

Add Comment

このアイテムは閲覧専用です。コメントの投稿、投票はできません。

About

YK
岐阜県の
ウェブデザイナーです。
興味のあることは、
Ruby on Rails,PHP,
ActionScript,XHTML,
CSS,Ajax...などなど

Feeds

RSS 2.0
Atom

Links

Wintryblasts Home
Wintryblasts.comのトップページです。

Nucleus CMS Japan
Nucleus CMS Japan official page.

WAVACオーディオラボ
素晴らしい真空管アンプを製作しているWAVACオーディオラボのホームページ。

CMONOS : http://cmonos.jp/
簡単インストールが特徴の中小規模サイト向けCMS。豊富なツールが使えます。

Login

Contents end