テーブル内の画像がずれてしまいます（IE8)

質問

テーブル内の画像がずれてしまいます（IE8)

画像(写真を含めたHP1ページ分の画像)を分割して写真の部分にリンク（lightbox）
を貼ってあります。
一度リンクにとんで（写真を大きく表示して）closeした後は正しく表示されるのですが、
更新するとまた複数の(リンクを貼ってある)写真の部分が下に落ちて、
全体が大きく崩れて表示されてしまいます。

ソースを見ると、分割した画像はテーブルの細かく区切られたセルのcolspanとrowspanで
配置されているようです。

画像がずれて表示される原因と回避方法を教えていただけないでしょうか。

回答No.3

gogoshingo · ベストアンサー

ソースを見ないとはっきりとした事は分かりませんが、
よくある原因を挙げておきます。

１．colspan,rowspanを多用する事で、セルサイズが正しく表示されない
　　解決法：個々のセルのwidth、heightをすべて指定する
２．画像の下に余白が空く
　　解決法：CSSでimg{vertical-align:bottom;}を指定
３．タグの改行によって半角スペースが生じるバグ（IE）
　　解決法：タグの改行を消す、もしくは<!---->を使う

<td>
<img src="～">
<img src="～">
</td>
↓
<td><img src="～"><img src="～"></td>
または
<td>
<img src="～"><!--
--><img src="～"><!--
--></td>

リンクマップを使用した方が簡単かも知れません。

お礼

詳しい説明をありがとうございました。

回答No.2

yyr446

サンプルみたいなの、載せられませんか？

（lightbox.jsとprototype.js以外に何かjavascript使ってませんか）

回答No.1

yyr446

「更新すると」の意味がよくわかりません。正しく表示されているページが、
ブラウザーの更新ボタンを押すと、崩れるのですか？？？

補足

「更新ボタン（F5)を押すと」、つまりは新しくそのページを開くと、ということです。

崩れた表示が、ページ上のどこか（質問ではリンクの部分と書きましたが、どこでもよいみたいです）
をシングルクリックするとあってほしい場所に戻ります。
（「カチっとした瞬間に、ずれている写真の位置が正しい場所に戻る」
という感じです。）