- ベストアンサー
同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象
- テンプレートを編集して作成したホームページで、ブラウザによってテーブルの表示が異なる現象が発生しています。
- 問題を単純化するために余分な文章を省いたHTMLを用意しても、問題は解消しません。
- 現在、この重大なエラーが公開されたままの状態であり、修正が急務です。
- curious_boy
- お礼率90% (9/10)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
この場合の幅というのは <table> の幅も含めていますか？ IE8, Google Chrome 5 で試したところでは <table> の幅は一致しますが、万全を期すならば html, body { margin: 0; padding: 0; } を指定した方が良さそうです。(デフォルトスタイルシートのリセット) width: 60%; は親要素に対しての割合ですから、margin, padding がブラウザ毎に違うと <table> の幅が不統一になります。 > Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせるとTridentで見たときにタイトルの幅が広すぎて間抜けなのです。 この辺りでしょうか。 ・全てのtable関連要素に margin, padding, border を指定する (デフォルトスタイルシートのリセット) ・em を使いつつ、幅を完全に揃えたいのなら、font-size を指定する (代償にアクセシビリティが下がります。「幅を完全に統一にしたい」という要望なら避けられない問題ですが…。) デフォルトスタイルシートはあてになりませんので、他にもあやしそうなプロパティを探してリセットしてみてください。
その他の回答 (2)
- think49
- ベストアンサー率59% (285/482)
#2 です。 ふと気が付いたので補足を。 > IE8, Google Chrome 5 で試したところでは <table> の幅は一致しますが、 IE8 と Google Chrome 5 のウインドウサイズが異なれば、<table> の幅も一致しません。 ウインドウサイズに応じて可変するものなので、当たり前といえば当たり前ですが、念のため。
- metametamu
- ベストアンサー率51% (153/295)
tableのwidthを60%とされていますが、trには別に12emなどを指定されていたりと単位がバラバラな気がするのですが・・・ まずemにするか%にするかを決定された方が良いのではないでしょうか。 tableの場合はborderを使われるのでしたらpxをオススメしますが・・・
お礼
回答ありがとうございます。 全体のデザインがパーセントによって指定されていたのですが、表の内側だけは○文字分と指定したかったのです・・・。 色々といじった結果、ご指摘のとおり単位にemを使ったのがまずかったらしく、パーセントに直すことでおおむね同じように表示されるようになりました。 ただ、どうしてそうなるのかは分かっていません（汗 とにかく、おかげさまで解決することができました！ ありがとうございました。
お礼
回答ありがとうございます。 言葉が不足していてすみませんでした。 テーブルの幅の違いも気になったのですが、実はこれは１００％に指定しまうので３つのブラウザでの表示はあまり変わらないのです。 マージンやパディングには要注意なのですね。 今回は単位を直すことでなんとかなりましたが、覚えておきます。 またこのような初歩的なことをお尋ねするかもしれませんが、よろしくお願いします。 ありがとうございました。