テーブル内の画像がずれてしまいます(IE8)
画像(写真を含めたHP1ページ分の画像)を分割して写真の部分にリンク(lightbox)
を貼ってあります。
一度リンクにとんで(写真を大きく表示して)closeした後は正しく表示されるのですが、
更新するとまた複数の(リンクを貼ってある)写真の部分が下に落ちて、
全体が大きく崩れて表示されてしまいます。
ソースを見ると、分割した画像はテーブルの細かく区切られたセルのcolspanとrowspanで
配置されているようです。
画像がずれて表示される原因と回避方法を教えていただけないでしょうか。
No.3ベストアンサー
- 回答日時:
ソースを見ないとはっきりとした事は分かりませんが、
よくある原因を挙げておきます。
1.colspan,rowspanを多用する事で、セルサイズが正しく表示されない
解決法:個々のセルのwidth、heightをすべて指定する
2.画像の下に余白が空く
解決法:CSSでimg{vertical-align:bottom;}を指定
3.タグの改行によって半角スペースが生じるバグ(IE)
解決法:タグの改行を消す、もしくは<!---->を使う
<td>
<img src="~">
<img src="~">
</td>
↓
<td><img src="~"><img src="~"></td>
または
<td>
<img src="~"><!--
--><img src="~"><!--
--></td>
リンクマップを使用した方が簡単かも知れません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スライドショーの上にロゴマー...
-
拡張子無しで画像を表示したいです
-
「DecareステートメントにPtrSa...
-
IMGタグでTIFF画像を表示
-
タイトルバーに画像を入れるHTM...
-
ボタンを押したままにする。
-
HPのリンクボタン。。。。
-
YAHOOオークションの出品説明に...
-
バナーの貼り方とバナーにリン...
-
▲▲マウスオンで画像を変更につ...
-
IE11にてonclickの動作不良
-
windowsは画像にマウスオンで画...
-
自分のHPにタグで天気予報を...
-
<img src="相対パス">の絶対パ...
-
<area></area> 部分にボーダー...
-
画像の周りに色がつく
-
期間ごとに画像表示を切り替え...
-
テーブルタグの余白
-
PDFの保存ボタンが表示されません
-
background-sizeでcontainする...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
IMGタグでTIFF画像を表示
-
ボタンを押したままにする。
-
pngやjsの後ろの英数字の意味は...
-
タイトルバーに画像を入れるHTM...
-
背景が透明なリンクボタンで、...
-
画像クリックでクリップボード...
-
拡張子無しで画像を表示したいです
-
クリックしても、リンクに飛ば...
-
バナーの貼り方とバナーにリン...
-
HTMLにQRコードを挿入する方法
-
form以外でのpostってできますか?
-
クリッカブルMAP領域が分かる様...
-
期間ごとに画像表示を切り替え...
-
スライドショーの上にロゴマー...
-
アルバムをめくるように、画像...
-
複数のボタンで1つのエリアに...
-
HTML上の画像を結合する方法が...
-
「DecareステートメントにPtrSa...
-
<A href= と<IMG srcの使い分け
-
CSSを使わずにマウスオーバーで...
おすすめ情報