IEで<div>の下の<img>がずれる

質問

_________________________
|...............................|←<div>
|...............................|
|...............................|
|...............................|
￣￣￣￣￣￣￣
________________________
|/////////////|←<img>
￣￣￣￣￣￣￣
<div>で囲んだ，上のテーブルの背景に画像を並べて，
下の方の画像だけを変えたいので<img>で画像をくっつけて
2つとも左に寄せて揃えました。
上の絵だと離れてますが<div>と<img>のスキマは無いです。

firefoxではきちんと揃っていて1枚の画像に見えるのですが，
IEで見ると何故か<img>の画像が2pxほど右にずれてしまいます。
色々こねくり回してみたけど原因がなんなのか全くわかりません。
どうしてなんでしょうか。

回答No.3

abril · ベストアンサー

元々一続きの：
■■■■■
□□□□□
というイメージを、■■■■■と□□□□□に分けた上で、上下に隙間無く並べて一枚のイメージに見える様に再構成したい、という事でしょうか？で、現在は■■■■■がtableの背景として（「画像を並べて」という言葉からして）リピートさせてレンダリング、□□□□□はimgタグで配置…という構成ですか？以後はその仮定でお話させて頂きます。

現状「IEで見ると何故か<img>の画像が2pxほど右にずれて」という状態になっている原因は、HTMLとCSSのソースがわからないと限定しかねます。既にご回答の方々が仰っている通り、ケースバイケースで様々な原因が想定され得るからです。ただ、■■■■■の方が単なるtableの背景扱いにされているという事は、オリジナルの一続きのイメージは「重要な意味を持たない装飾的画像」と判断します。であれば、いっそ「どちらも背景画像として配置する」構成に変えられた方が宜しいかと思います。現状だとCSSを外せば■■■■■は表示されず□□□□□のみ表示されるという珍妙な状態になりますので。以下は考え方のごく大雑把なサンプルです。

【HTML】
<div class="xxx">
<table>
<tbody>
<tr>
<td>データ</td>
</tr>
</tbody>
</table>
</div>

【CSS】
div.xxxのスタイルとして、□□□□□のイメージの高さと同じ値をpadding-bottomで確保した上で、backgroundに□□□□□のイメージをno-repeat、bottom、leftで配置すればマークアップ的にも無駄なく、お望みの結果が得られると思います。
※<table>の罫線や下マージンは全て値0に初期化済み、<table>の幅とイメージ□□□□□の幅は同一、という前提です。

お礼

abrilさんの通りに一新して試してみたところあっさりできました。
他に回答していただいた方も勉強になりました。
ありがとうございました＾＾

回答No.2

DrFell

ボックスモデルを把握していますか？
宣言はどうされて、何モードですか？
divとimgのマージン・パッディングの初期化はされてますか？
罫線はどうなっていますか？無指定なら太さを0pxとするとＩＥは挙動が変わることがあります。
親要素がわるさしていませんか？

ヒントでした。

お礼

>>divとimgのマージン・パッディングの初期化はされてますか？

cssで全て一括して初期化してみました。

>>罫線はどうなっていますか？無指定なら太さを0pxとするとＩＥは挙動が変わることがあります。

罫線を表示してみてもやはりずれていました。

回答No.1

SAYKA

ホワイトスペースじゃない？
imgそのもののstyleが間違ってるんじゃない？
marginとpaddingを指定し忘れているとか。

あと余り関係ないけどdivというblockの直後にinlineを配置するのは行儀がよくない。

お礼

回答ありがとうございます。

>>ホワイトスペースじゃない？

なんぞやと思ってぐぐってみました。
こんな要素もあるんですね。いろいろいじってみます。

>>imgそのもののstyleが間違ってるんじゃない？
marginとpaddingを指定し忘れているとか。

imgのmarginとpaddingは0と指定してあります。

>>あと余り関係ないけどdivというblockの直後にinlineを配置するのは行儀がよくない。

それが原因かもしれないです。
試してみます。