cssでIEとFIREFOX(とchrome)の表示が違う

Question

http://www.recipe-de-cooking.com/で
IEで見たときとfirefoxで見たときではレイアウトが異なっています。
中央寄せの状況もブラウザで違い、またコンテンツの幅も違っています。
firefoxでは右端が出っ張った形になっています。(ガタガタ)なぜでしょうか？
解決方法がわからないので教えてください。

atse · Accepted Answer

IEの横幅　->　width
他　->　width + 左右padding（指定があれば） + 左右border（指定があれば）

全体や広告部分にも該当箇所があるかと思います。
これらプロパティを併用しないようなつくりにするか、
ブラウザ別にスタイルを変えるなど対処してください。

「CSSハック」で検索すると、特定のブラウザに向けて
スタイルを設定する方法を説明するサイトが沢山出るかと思います。

think49 · Answer

#2です。 > ですが、いろいろwidthの数値を調整しているのですが、うまくいきません。 widthを一つ一つ指定するのではなく、上位の要素にだけwidthを指定してみてはどうでしょうか？下記はFirebugでCSSを修正して横幅が整うことを確認しました。(tableの横幅がずれるのは内部のwidthを整えて修正してください) # 一括で同じwidthを指定するなら、上位の要素にだけ指定すれば十分です。 # 下位要素はデフォルトの横幅(width:100%;)で自動的に整います。 ------------ .main{ width: 900px; } #head { /*magin, padding, widthを指定しない */ } .cnt { /*magin, padding, widthを指定しない */ } .footer { /*magin, padding, widthを指定しない */ }

--------- > いろんなサイトを見ているとレイアウトがきっちりしていてどうやっているのか不思議です。「CSS バグ」で検索すると様々なブラウザのバグがHITします。そうした情報を参考にしたり、自分で試行錯誤して手直しして修正してます。試行錯誤する際は、「Firebug」「IE Developer Toolbar」などのデバッグツールを活用して。あと、IEはバグの宝庫なので初めはFirefoxで修正してそれからIEでチェックするといいんじゃないでしょうか。

think49 · Answer

DOCTYPEスイッチが後方互換モードになっているので、
まず「後方互換のまま修正する」か「標準準拠に変更するか」方針を決める必要があると思います。

IEの標準モードと互換モード - CSSめも@Palm84
http://www10.plala.or.jp/palm84/css_memo_standard_quirks.html


** 後方互換のまま修正する
以下、どちらでもOK
- widthと同時に左右borderや左右paddingを指定しない (divを入れ子にする等)
- CSSハックでブラウザ毎にCSSを指定する

ADP: IE6のwidth解釈バグ対処法
http://adp.daa.jp/archives/000265.html
ボックスモデルの解釈の不具合(IE/width,heightプロパティ):スタイルシート(CSS)辞典 - HTMLタグボード
http://www.dspt.net/stylesheet_css/001/ie_error1.html
CSSレイアウトの定石　WinIE6バグ回避法
http://mb.blog7.fc2.com/blog-entry-83.html

** 標準準拠に変更する
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
にして、レイアウト修正する。

# ページ数がまだあまり多くないようなら、標準準拠モードに変更すると長期的にみて手間が省けると思います。

cssでIEとFIREFOX(とchrome)の表示が違う

IEの横幅 -> width

#2です。

DOCTYPEスイッチが後方互換モードになっているので、

この回答への補足

似たような質問が見つかりました

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

IEの横幅　->　width