IEで
の下のがずれる

Question

_________________________ |...............................|←

|...............................| |...............................| |...............................| ￣￣￣￣￣￣￣ ________________________ |/////////////|← ￣￣￣￣￣￣￣

で囲んだ，上のテーブルの背景に画像を並べて，下の方の画像だけを変えたいのでで画像をくっつけて 2つとも左に寄せて揃えました。上の絵だと離れてますが

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

abril · Accepted Answer

元々一続きの：

■■■■■
□□□□□
というイメージを、■■■■■と□□□□□に分けた上で、上下に隙間無く並べて一枚のイメージに見える様に再構成したい、という事でしょうか？で、現在は■■■■■が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>の幅とイメージ□□□□□の幅は同一、という前提です。

データ

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

の幅とイメージ□□□□□の幅は同一、という前提です。

DrFell · Answer

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

SAYKA · Answer

ホワイトスペースじゃない？
imgそのもののstyleが間違ってるんじゃない？
marginとpaddingを指定し忘れているとか。


あと余り関係ないけどdivというblockの直後にinlineを配置するのは行儀がよくない。

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

元々一続きの：

ボックスモデルを把握していますか？

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

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング