IE７とIE８の 表の表示のされかたの違いについて伺います。

質問

IE７とIE８の　表の表示のされかたの違いについて伺います。

セルに画像を挿入した表を、縦に４つ配置しています。
IE７で見ると、画像がセルにきれいに収まっているのに、IE８で見ると、セルが画像より広がって隙間ができ、表の枠組みがずれています。（添付画像を見てください。）
この症状は、４つある表のうち、３つに現れ、１つだけはきれいに表示されています。

ソースに何らかの違いがあるのかと思い、HTMLを見比べましたが、どの表も同じです。

作成した表、すべてがズレて見えるのなら、ブラウザの何かの違いの結果かもしれませんが、
ズレるもの、ズレないものがあるのも、不思議でなりません・・・。

何をどう修正したら、IE７でもIE８でもズレないで表示されるのかわからず、困っています。
VISTA・IE７　と　XP・IE８　で見ています。

表の枠組みのズレの原因、ブラウザによる表の見え方の違いについて、どなたか教えてください。
至急で修正しなければならないので、どうぞよろしくお願いします。

この投稿のマルチメディアは削除されているためご覧いただけません。

回答No.1

tama-maru · ベストアンサー

IEは昔からwebレタリングに独自の機能や解釈をふんだんに入れていて、それがバージョンごとに違ってたりします。
IE8からは他のブラウザ（Firefox、Chrome、Safari、Opera）と同じように国際規格に出来るだけ近いレタリングをするようになりました。
詳しくはこちらをどうぞ。
http://www.atmarkit.co.jp/fdotnet/special/ie8review/ie8review_01.html

IE8では互換表示の機能が追加されていますので、これを利用することでIE7のレタリング結果に近づけることが出来ます。
やり方は上のリンク先を参考にどうぞ。

お礼

教えていただいたサイト、読ませていただきました。
詳しくわかりやすい説明で、とても勉強になりました。
早速試してみようと思います。

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

回答No.3

noname#119957

■ＣＳＳの基本中の基本ですが。。
まず、どんな場合でも、ブラウザの個別のデフォルトのマージンを共通にするためには、ｃｓｓに
* {
margin:0px;
padding:0px;
}
がかならず必要です。

次に、テーブルの中にイメージを収める場合で余白が自動的に挿入される場合は、
ｃｓｓに
img {
display:block;
}
を入れないと余分な余白が設けられることがありますので、これも必ず必要です。
**
この辺は大丈夫でしょうか？

お礼

アドバイスありがとうございます。

* {
margin:0px;
padding:0px;
}
は、挿入してあります。

img {
display:block;
}
こちらは、記載をしていませんでした。勉強不足ですね。
試してみたのですが、私のケースでは、余白部分に変化はありませんでした。
なにかほかの原因なのでしょうね・・。

回答No.2

ORUKA1951

他のブラウザ、firefox,Opera,safari,GoogleChrome等では、IE8と同じように見えますか？
　なら、IEのモードが違う。
　画像は小さくて確認できませんが、tableを使ってデザインされているようですが、これ自体が、そもそもの問題なのでそれを止めて、きちんとCSSでデザインしなおしましょう。この程度の簡単なデザインならブラウザによる見え方の差が最小になるように修正するのは容易でしょう。
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
　でとりあえずチェック

お礼

tableは使わないほうが良いというのは、知っていたのですが、CSSの知識もまだ浅いため、
知っている範囲で作ってしまいました。
作り直したいと思っています。

HTMLのチェックができるのですね。こちらも活用していきたいと思います。

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