') ?> IEで連続して画像を貼ると隙間が空く。FireFoxでは空かない。(IEはソースの改行を拾う。)|ぼくんちのバックステージ

IEで連続して画像を貼ると隙間が空く。FireFoxでは空かない。(IEはソースの改行を拾う。)

IEで連続して画像を貼ると隙間が空く。FireFoxでは空かない。(IEはソースの改行を拾う。)TOP ≫  Web制作スタイルシートとWebデザイン

ie,firefox,画像,隙間,改行などについて。

IEで、画像同士をピッチリ隙間無く並べようとしても、何故か隙間が空く。。。原因はソースの改行ですた(´Д`;)

IEで連続して画像を貼ると隙間が空く。FireFoxでは空かない。(IEはソースの改行を拾う。)

訂正:
このブログはXHTML 1.0 Transitionalで書かれていて、IE7は「標準モード」でレンダリング(表示)しています。画像はズレたり隙間が空いたりは(多分)しません。
この現象はIEが「互換モード」で作動している時のみの現象みたいです。
ちなみに、このページの携帯版をIEで閲覧すると互換モードで表示されます。画像のズレが確認出来ます。

以下、一回目の投稿の文章。

タイトルで「なんのこっちゃ?」と思われるかもしれないので、画像を貼ると。。。

画像4 画像1 画像2 画像3

▲上の画像、まともに見えますが、携帯用ページでIEから見ると多分3つの画像の間に隙間が空いていて、FireFoxなどで見ると画像同士の間に隙間が無い状態で表示されると思う。

コレ、ソースを書くとこんなカンジ。

<div style="width: 332px;">
<img style="width: 225px; height: 205px; float: right;"alt="画像4"
 src="http://img.tvbok.com/b/b2008/no4.png" />
<img style="width: 107px; height: 60px;"alt="画像1" src="http://img.tvbok.com/b/b2008/no1.png" />
<img style="width: 107px; height: 78px;"alt="画像2" src="http://img.tvbok.com/b/b2008/no2.png" />
<img style="width: 107px; height: 67px;"alt="画像3" src="http://img.tvbok.com/b/b2008/no3.png" />
</div>

ソース内に「padding:0; margin:0;」のスタイル指定も、スタイルシートで指定しても無駄です。
スタイルシートでキッチリ隙間を無くす設定をしているのに、どんだけcssの設定で試行錯誤してもダメ。。。

次に以下

画像4画像1画像2画像3

▲IEで見ても、Firefoxで見ても、画像の間に隙間は存在しない。

ソースにするとこんなカンジ

<div style="width: 332px;">
<img style="width: 225px; height: 205px; float: right;"alt="画像4"
 src="http://img.tvbok.com/b/b2008/no4.png" />
<img style="width: 107px; height: 60px;"alt="画像1" src="http://img.tvbok.com/b/b2008/no1.png" /><img style="width: 107px; height: 78px;"alt="画像2" src="http://img.tvbok.com/b/b2008/no2.png" /><img style="width: 107px; height: 67px;"alt="画像3" src="http://img.tvbok.com/b/b2008/no3.png" />
</div>

違いは「IMGタグの間に改行があるか無いか」だけ。

IEって、ソース内の改行も拾っちゃうのね。。。
この辺解らずに2時間くらい悩んじゃった(´Д`;)


Category: スタイルシートとWebデザイン | 投稿:2008年10月27日 (最終更新:2008/12/02)
一つ前の記事 : 今日のネタ:YouTube、JASRAC、イー・モバイル
一つ後の記事 : 今日のネタ:写真埋め込み加工、週刊少年ジャンプ48号


携帯の方はコチラへ