
http://www.recipe-de-cooking.com/で
IEで見たときとfirefoxで見たときではレイアウトが異なっています。
中央寄せの状況もブラウザで違い、またコンテンツの幅も違っています。
firefoxでは右端が出っ張った形になっています。(ガタガタ)なぜでしょうか?
解決方法がわからないので教えてください。
No.1ベストアンサー
- 回答日時:
IEの横幅 -> width
他 -> width + 左右padding(指定があれば) + 左右border(指定があれば)
全体や広告部分にも該当箇所があるかと思います。
これらプロパティを併用しないようなつくりにするか、
ブラウザ別にスタイルを変えるなど対処してください。
「CSSハック」で検索すると、特定のブラウザに向けて
スタイルを設定する方法を説明するサイトが沢山出るかと思います。
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でチェックするといいんじゃないでしょうか。
No.2
- 回答日時:
DOCTYPEスイッチが後方互換モードになっているので、
まず「後方互換のまま修正する」か「標準準拠に変更するか」方針を決める必要があると思います。
IEの標準モードと互換モード - CSSめも@Palm84
http://www10.plala.or.jp/palm84/css_memo_standar …
** 後方互換のまま修正する
以下、どちらでも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 …
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の数値を調整しているのですが、うまくいきません。
もうお手上げ状態です。
いろんなサイトを見ているとレイアウトがきっちりしていてどうやっているのか不思議です。
どのようにしたらいいのか教えて下さい。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTMLとCSS(ブラウザ関連)について質問です。 1 2023/03/07 08:07
- Chrome(クローム) Chromeでダウンロードしたファイルを拡張子ごとに取り扱い方法を変更できないんでしょうか? 2 2022/11/19 17:34
- その他(ブラウザ) テキストを入れるときの縦線の点滅がそれ以外のブラウザ上にも表れます。 1 2022/07/29 21:55
- Firefox(ファイヤーフォックス) Firefoxでグーグルの検索画面が変です 2 2022/09/20 19:25
- Firefox(ファイヤーフォックス) Firefoxが起動しない原因とカイゼン方法 2 2022/07/19 10:54
- ホームページ作成・プログラミング chromeでhttpdを使うと 2 2022/03/23 10:54
- Chrome(クローム) google chromeについて困っています。 現在パソコンのブラウザにchromeを使用している 1 2022/04/25 16:31
- その他(ブラウザ) NHK+をPiPの小窓で見たい 1 2022/10/03 13:04
- Chrome(クローム) youtubeのサムネイルを縦4列配列にしたい。 1 2023/03/09 22:35
- その他(ブラウザ) グーグルクローム パソコン用のブラウザ 画面を大きくする拡張機能ズームがうまくいきません 新しいバー 1 2023/01/16 00:30
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのプロパティが一覧にな...
-
CSSで、IDとCLASSを...
-
個別にリンクの色を変える方法
-
このタグの意味教えて下さい
-
CSSに同じclass名がいっぱい‥。...
-
ブックマークにCSS設定が効いて...
-
idの中のid指定
-
HP製作 paddingやmarginが効...
-
CSSについて
-
ページの左右の余白(枠外)に...
-
CSSでid名やclass名に「_」や「...
-
cssでリンクの文字と画像の...
-
CSSのクラス名・ID名の指定でワ...
-
Jimdoで文章中のリンクを張った...
-
htmlの文字が縦書きになる
-
アイフレームについて。素人です。
-
角丸画像の背景色を透明にした...
-
NからZへの全単射を具体的に構...
-
画像のスライスiモードサイトで...
-
widthやheightの数値に単位(px...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
idの中のid指定
-
サイトにjQueryが使用されてい...
-
liリストタグの背景色に色がつ...
-
brにクラスをつけてcssでdispla...
-
HTML要素のid/class名の長さに...
-
inputタグのテキストBOXだけ右...
-
リンク文字の 一部だけ色を変...
-
CSSのクラス名・ID名の指定でワ...
-
特定の見出しのみ前後の空白を...
-
同ページ内でリンクの色を変え...
-
スタイルシートで、id属性の中...
-
[HTML] selectの線を非表示に...
-
CSSの適用を一部だけ除外したい。
-
HP作成(ワッパーを中心に)
-
<span>で2重にかけているものを...
-
オンマウス時の背景色を個別に...
-
Bootstrap 訪問済みテキストリ...
-
最近、HTMLのヘッダーをIDで定...
-
子孫セレクタの読み方をおしえ...
おすすめ情報