- ベストアンサー
cssでIEとFIREFOX(とchrome)の表示が違う
http://www.recipe-de-cooking.com/で IEで見たときとfirefoxで見たときではレイアウトが異なっています。 中央寄せの状況もブラウザで違い、またコンテンツの幅も違っています。 firefoxでは右端が出っ張った形になっています。(ガタガタ)なぜでしょうか？ 解決方法がわからないので教えてください。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
IEの横幅 -> width 他 -> width + 左右padding（指定があれば） + 左右border（指定があれば） 全体や広告部分にも該当箇所があるかと思います。 これらプロパティを併用しないようなつくりにするか、 ブラウザ別にスタイルを変えるなど対処してください。 「CSSハック」で検索すると、特定のブラウザに向けて スタイルを設定する方法を説明するサイトが沢山出るかと思います。
その他の回答 (2)
- think49
- ベストアンサー率59% (285/482)
#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)
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"> にして、レイアウト修正する。 # ページ数がまだあまり多くないようなら、標準準拠モードに変更すると長期的にみて手間が省けると思います。
補足
ご回答ありがとうございます。 後方一致でやろうと思っています。 ですが、いろいろwidthの数値を調整しているのですが、うまくいきません。 もうお手上げ状態です。 いろんなサイトを見ているとレイアウトがきっちりしていてどうやっているのか不思議です。 どのようにしたらいいのか教えて下さい。