ベストアンサー

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

2009/06/19 14:34

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

eccschool
お礼率8% (53/644)

HTML
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

atse
ベストアンサー率83% (36/43)

2009/06/19 14:50 回答No.1

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

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

think49
ベストアンサー率59% (285/482)

2009/06/20 10:44 回答No.3

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

ログインすると、全ての回答が全文表示されます。

think49
ベストアンサー率59% (285/482)

2009/06/19 15:41 回答No.2

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"> にして、レイアウト修正する。 # ページ数がまだあまり多くないようなら、標準準拠モードに変更すると長期的にみて手間が省けると思います。

質問者