IEとFirefoxで表示が違う

質問

現在WEBサイトを制作しています。
フォームを挿入したのですが、IE(8)で表示すると<form>要素の上部に大きなスペースが空いてしまいます。Firefoxで表示すると問題ないです。

HTMLのフォーム付近は以下のような構成にしています。
<p>フォーム上部の文章</p>
<form method="#" action="#">
<table>
<tr><td>テキスト</td> <td><input type="text" name="#"></td></tr>
　　・
　　・
</table>
</form>

IEでは<p>の文章と<form>テーブルとの間に大きなスペース(約200px)ができてしまいます。
Firefoxではたまたまうまく処理されていて、間違った記述をしていると考えるべきでしょうか。
それとも、IEブラウザの不具合なのでしょうか。

このような症状についてご存知の方がいらっしゃいまいしたらごご教授いただけますようお願い申し上げます。

回答No.2

naokita · ベストアンサー

<p>フォーム上部の文章</p><form method="#" action="#"><table><tr><td>テキスト</td><td><input type="text" name="#"></td></tr></table></form>
---------------------
１行にしてもダメですか？　これが原因って場合もあります。

確かに、フォーム関係で多少の差異があるのは確かです。
しかし、この程度のソースで、IE8で差異がでるとしたら、
制作者のミスが第一に考えられます。

IE8はかなり良く（進化）なったので、200pxものスペースが空く事はありませんので、CSSでの設定がどこか間違っているのかもしれません（値とか単位とか）。
システム側で改行などのが埋め込まれるパターンかもしれません。
ブラウザからソースを見るか、単純化して再検証するかすれば判断出来るでしょう。

お礼

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

いろいろ修正しているうちに問題のスペースは50px程になりました。
アドバイスいただいたようにtableを1行にすると問題のform上部分が小さくなりました。
行を増やす毎に大きくなるようです。

ブラウザから確認すると、上部の文章とformとの間はスペースではなくform要素の上部分が大きいことがわかりました。(backgroundカラーを付けて確認しました)

考えられる場所全てにmargin,paddingの指定を試しますが、まだ解決しません。
引き続き、他サイトのコードを参考にするなどして解決策や記述ミスを探してみようと思います。

この度は大変ありがとうございました。
またご質問させていただいた時はどうぞ宜しくお願い致します。

回答No.1

stuff_ppo

reset.cssの導入をおすすめします。

「ユーザーからCSSによる特別な指定が無い場合、
　各要素の周囲にどの程度隙間を設けるか」
については、ブラウザがそれぞれ固有の設定を持っています。

したがって、同じHTML,CSSをもっても、
どうしても、表示には差が出てしまいます。

そこで出来た解決策が、
ブラウザによる独自設定をまっさらにするCSSをまず読み込ませ、
その後必要な要素に対してCSSを設定していく
という手法です。

この「まっさらにするCSS」は、
reset.css という名前で何種類も出回っています。
検索してお好きなものを使ってみてください。

過去の似た事例では、
「formに対してだけ、かつmarginに対してだけ」resetをかけています。
http://okwave.jp/qa/q5421693.html
http://okwave.jp/qa/q1751711.html

　---

なお、ブラウザの表示（CSS）まわりで問題が発生した場合、
その原因の90%はIEにあると思ってもらって差し支えありません。
それくらい酷いブラウザです。

というわけで、今後表示不一致問題が発生した場合は、
「ie 問題の要素」での検索もおすすめです。
form ie margin - Google 検索
http://www.google.co.jp/search?hl=ja&lr=lang_ja&q=form+ie+margin

お礼

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

reset.cssという存在を知らずに、CSSには*{margin:0; padding:0;}を指定していました。
公開されている代表的なreset.cssにリンクや書き足しをしてみたり、form要素に直接指定をしてみましたが、やはりIEだけスペースが残ってしまいます。

いろいろ修正しているうちに問題のスペースは50px程になりました。
ブラウザから確認すると、上部の文章とformとの間はスペースではなくform要素の上部分が大きいことがわかりました。(backgroundカラーを付けて確認しました)

別の方の回答も受け、tableを1行にすると問題のform上部分が小さくなりました。
どうやら行を増やす毎に大きくなるようです。
考えられる場所全てにmargin,paddingの指定を試しますが、まだ解決しません。
引き続き、他サイトのコードを参考にするなどして解決策や記述ミスを探してみようと思います。

この度は大変ありがとうございました。
またご質問させていただいた時はどうぞ宜しくお願い致します。