CSSの他ブラウザでの崩れの対処方法を教えてください！

質問

当方ネット初心者が集まり、右往左往しながらネットショップを運営しております。

今回新しいトップページを全部CSSで作成し、
先日リニューアルオープンしたのですが問題が発生しとても困っていますのでぜひお助け願いたいと思い書き込ませていただきたいと思います。

現在、検証の結果ウインドウズのIE6.0とIE7.0では正常に表示されるのですが、MacのFire Foxとsafariではレイアウトがグチャグチャになってしまいます。

また、重た過ぎるのか時々正常にブラウザに映し出されない事があります。写真の画質を落とせばいいのですが、ネットショップの性質上落としたくありません。。。

ざっと素人が説明させていただきましたが、
当方のHPのURL載せておきますので、至急アドバイスをいただけましたら幸いです。

宜しくお願い致します。

Mari Pulang
http://www.rakuten.ne.jp/gold/luckygo/

回答No.1

grumpy_the_dwarf · ベストアンサー

> ウインドウズのIE6.0とIE7.0では正常に表示されるのですが、
> MacのFire Foxとsafariではレイアウトがグチャグチャ

まず、div#indexの高さが100%ですね。CSSでブロックの高さや幅の
パーセント表記は、親のサイズを基準に考えます。div#indexの親は
bodyで、速い話がブラウザの高さになっちゃいます。その100%だか
ら、せいぜい700～1000pxくらい。div#copyはその直後にありますか
ら、ページトップからちょっとスクロールしたら見えちゃいます。

IEには「中身がはみ出したらボックスを勝手に広げる」バグがある
ので、このミスは表面化しません。

似たようなことが他のあっちこっちのボックスの高さ指定でも起き
ています。中身より小さな高さしか指定していなくて、次のボック
スを正しく配置するとエラいことになっちゃうパターン。一番ひど
いのはdiv.main02aかな。250pxしかない。div#fooderもそう。

そこらへんの高さの指定を削除して成り行きで配置させれば、め
ちゃくちゃな崩れはなくなります。

お礼

どうもありがとうございます！すごい助かりました！

回答No.3

noname#100277

IEを基準にサイト構築はしないで下さい。
基礎は全て「Firefox」等のW3Cに準じてるブラウザで実行。
IEは飽く迄「拡張」程度に留めるべき。
（アニメーション・カーソルやスクロール・バー等）

回答No.2

tenderfeel

色々アレなのでポイントだけ・・・

１．CSSを書く前にHTMLだけで書く
＞レイアウト崩壊の原因がHTMLの書き方にある場合も。
　最初にHTMLだけ書いていくと、コンテンツの並び順が分かりやすいです

２．CSSのレイアウト優先でソースを書かない
＞DIVタグやID、classまみれになりがち。TPOにあわせてタグを使い分ける
http://www.kanzaki.com/docs/html/htminfo11.html

３．製作時にIEでプレビューしない
＞散々言われてますがCSS書くときIEで確認するのは愚の骨頂です
　Firefoxかsafariで確認してIEでおかしいところだけ直すこと

４．floatやpositionプロパティはIEでバグがあるので気をつけること

どうしても同じ表示にならないのであれば、巷で配布されてるレイアウトテンプレートを使うのが楽だと思います。

参考URL：

http://www.kanzaki.com/docs/htminfo.html

お礼

迅速なお返事ありがとうございます。
基礎から勉強しなおします。。