IE系とFF系の表示の違いに苦しんでいます

質問

サイトを作るのは見よう見まねで3度目です。

いろいろな掲示板でieではなくfirefoxやsafariやnetscapeで様子を見ながら制作することが薦められていたのでそうしました。その後、ハックはあまりよいことではないらしいですが、仕方なくアンダーバーを用いてieやoperaでの型崩れを修正するという方法です。　しかし、ie6.0と7.0はまた仕様が違い、もしやこれは私のやり方が間違っているのではないだろうかと思い、質問するにいたりました。

ハコを作りその中に別のハコを入れると、すでに縦幅の修正が必要になります。本当にいちいちcssにアンダーバーを使って訂正を入れなければなりません。　たとえば、
#box{height:358px;padding:0;margin:10px 0 10px 0;_margin:3px 0 3px 0;}
こんなふうにです。

細かすぎるような気もしますが、ここまでやらないと整然としないのです。　これは普通のやり方でしょうか？　間違っているとすれば、回避方法はありますか？

回答No.1

benelli · ベストアンサー

確かにデザインによってはＣＳＳハック以外に対処方法がない場合も少なくありません。が、普通にデザインする分にはハックに頼らなくても経験上解決できます。

自分個人としてはMacIE向けのスターハック以外は使うことはありませんし、それなりの実務経験（趣味ではなく仕事で覚えた知識）でほとんどのＷｅｂページ作成者の要望・問題点にはＣＳＳハックなしで対処できます。（大概は問題ごとにあわせた特定のスタイルやプロパティを追加すればどうにかなります）

ですが、個人作成のＷｅｂページでしたらそんなに気にすることなくＣＳＳハックを多用しても構わないと思います。一般の人にはソースそのものではなくブラウザが表示した画面を見てもらえればいいわけで、最新のブラウザやごく一般的なブラウザで表示さえできれば来訪者も困ることはないのですから、ソースの綺麗さは目をつぶっても良いかと思います。

もちろんＣＳＳハックを使わないほうが良いのは確かで、構文ミスを自動チェックするブラウザを使っている人はＣＳＳハックされたページを見るごとにエラーメッセージが出たりと問題点もゼロではありません。
また、どのブラウザでもまったく同じ表示をさせようとするより、画面の読みやすさや雰囲気が悪くならなければそれでよいと妥協したほうが安全で確実でもあります。

よって、Ｗｅｂページの見た目や美しさで勝負したいならＣＳＳハックを多用し、文章など中身の見やすさや幅広い人たちに見てもらいたいならばできるだけＣＳＳハックを使わないようにすれば良いかと思います。
逆にどんなに努力してでもすべての点で完璧のページを目指す！　というのでしたらブラウザごとのバグ一覧やＣＳＳバグリストを熟読し、時間をかけて手直しをしてみてはいかがでしょうか。

http://cssbug.at.infoseek.co.jp/index.html

http://dhr.at.infoseek.co.jp/stylebug2.htm

お礼

ご回答ありがとうございます。スターハックというものは知りませんでした。

どのブラウザでも同じ表示をすることはあきらめているのですが、どうにも両方で「正常に」見せることができず・・・。　もう大方作り終えてしまったので、いまさら手を加えるのも時間の問題で難しい状態です。　おっしゃるとおり、雰囲気が崩れなければよしと思っているのですが、もうどこにどう手を加えたらよいのかもわからない状態です。

このような場合、とりあえずすべての＿をはずして、様子を見ながら調整していくのがよいのでしょうか？

補足

知識が足りていないのに、770ｘ500のハコ型にしたのが運のツキだった気がします。　グレー背景で、画面中央にボーダーで囲んだ白い外バコが浮いていて、その中にコンテンツ用の内バコがまたボーダーで囲まれて置いてあり、その上下には水平線を入れています。　悩んでいるのは縦幅オンリーです。　

ここは、ハコを取っ払うことを考えたほうがよいでしょうか？　あるいは外バコの背景に、内バコ用と水平線の入った画像を貼っておくとか・・・。　もしまだご覧になっていたら、アドバイスいただけませんか。

回答No.4

benelli

＃１の者です。補足読ませていただきました。

＃３の方のお話の通り、borderを使うことでデザインが崩れることは多々あります。ＩＥの標準モードと互換モードで表示が変わるのは有名ですが、標準モードと互換モードは何が違うのか、そもそもどのドキュメントタイプでどのモードになるのか、など根本に関わる事柄ですらブラウザ毎にバラバラな状態です。

http://web8341.info/advanced/dtd.htm

補足にあるようにハコ（DIVですよね？）を多重にすること自体は多少なら特に問題ではないと思います。
逆に縦幅については、理論上はheightをセットしてoverflowプロパティとclearプロパティを指定すれば安全なはずなのですが、実際はブラウザ毎にその解釈がまちまちです。ブラウザバグだけでなく、旧製品の表示との兼ね合いやメーカー側の仕様解釈などいろいろな理由で各ブラウザの表示が異なってしまい問題となります。

縦幅の修正が必要となるということですが、あくまで私の予想ではありますが、ボックスを多重にしていることではなくボックスの積み重ね方に問題があるのではないでしょうか？
＃２の方と同じ意見ですが、そもそも縦幅がいくら変わっても問題ないようにボックスを積んでいくのが大事だと思います。
うまく説明しにくいのですが、ボックスの組み合わせの仕方は基本的に下から上へ（地球の重力とは逆の方向に）落下させるようにして積み重ねるのが一般的です。そのルールを守れば、縦幅がどのように変化しても全体のバランスが崩れないようになるはずです。

ここまで来るとコンピューターの技術というよりデザイナーの領分に片足突っ込んでしまいますが、常に縦幅が変わってもよいようにデザインするようがんばってみてください。

お礼

こんばんわ。ありがとうございます。

はい、多分、マージンやパディングについてきっちりとはわかっていない私の、ハコの積み重ね方に問題があるかと思います。とりあえず、紙モノとは頭を別にして、まずオオバコを背景画像にして、みなさんの助言と参考サイトを確認し、そこから組み立てなおしてみました。すると、意外と・・・なんとかなりました！

今回の試行錯誤で、ちょっと視界が広がったような気がしています。ありがとうございました。

回答No.3

Muller3

「ADP: IE6のwidth解釈バグ対処法」
http://adp.daa.jp/archives/000265.html
「ADP: ピクセル単位で合わせるところではborderを使わない（IE7でも！）」
http://adp.daa.jp/archives/000571.html
このへんの記事が参考になりませんかね。

border使っていることによってブラウザによって解釈が違ってしまい、合わなくなるということでは。
高さまで指定するのは珍しいのであまり見ないのですが、widthと同じバグがheightにも当てはまるということではなかろうかと。
borderじゃなく背景画像使った方が吉なのかも。

お礼

ありがとうございます！　やっぱりハコにボーダーを使っているのが間違いの元かもしれないですね。　素人なので「こうしたい」から始めてしまいました。いまさらデザインをやり直すのはとてもじゃないけどつらいので、ひとまず背景に画像を貼ってみます。そこまでのアレでもないんですが・・・。

回答No.2

xenotactic

ドキュメントタイプをＵＲＬありのstrictにしておけば、
基本的に、だいたいのことについては
わざわざハックを使わずにも表現できると思います。
私自身テンプレートを製作、配布していますが、
ほとんどの場合ハックは使いません。

例がよくわかりませんが、
親要素の縦幅を指定しないとか。

お礼

ご回答ありがとうございます。

ＵＲＬありのstrict　←　一応これにはなっています。　ということは、やはり私のさじ加減の問題ですね、おそらく。
親要素の縦幅　←　頭を悩ませているのがまさしくここです。　

そうか、やはりプロのかたがたはハックなど使わないのですね。参考になりました。