ウェブ作成でのブラウザ対応

質問

ドリームウィーバーでウェブサイトを作成してるのですが、FireFox・IE6・IE7・Safariといった現在主流のブラウザで、レイアウトが大幅に型崩れしないような手法や鉄則がありましたら教えてください。

回答No.3

naokita · ベストアンサー

#2の補足へ返信。　それは、その時点の各問題なので、
質問者さんが各問題を定義してないのに対処も回答も出来ません・・・
妥協するか、違う表現するか、IE用で対応するか、将来のブラウザは？

# 自分のところでは、
IE7ズーム用まで対応を終えました。　IE8は、まだ未対応です。
ハックなんか今後のIE対応もどうなるかわからないし・・・
ソースを増やすよりも現状で妥協する事が必要な場合もある。

CSS Hack　　条件付きコメント　ie.css　　IE7ズームhasLayout

各問題が発生しそう、あるいは発生した場合に対処するだけです。
問題発生時に「各要素名,値　IE(x)　バグ」などで検索すると問題や最新の対応方法・情報サイトが見つかると思います。もしくは試行錯誤・自分で発見してみる。
※ MSサポートサイトでバグを調べても何の役に立ちません・・・
※ ドリのプレビューも使えないですね・・・

お礼

貴重なアドバイスありがとうございます。いつも使うブラウザはIE7なのですが、作ったサイトの出来栄えは、その他のブラウザ（FireFoxやSafari）のほうが、なぜか見栄えがいいんです。いろいろ調べてみるとIEに問題が多いようなのですね。現状の私の力量では妥協するか、違う表現をすることで対応するのどちらかでやってみます。ありがとうございます。

回答No.2

naokita

DTD　strict　にする事です。
でも、現実的にはtransitionalで作る場合が多いです。
大崩れする事はありません。それは仕様を理解していないから。
と言っても先日、strict で dl,dt,dd floatで行間違いに悩みました・・・
大崩れしたとしても、HTML,CSSで違う構造にしてやれば修正できます。
ブラウザでの違いは当然ありますが、marginの上下間の違いが多いと思いますので各margin設定で合わせれば、なんとなく合うでしょう。
それ以外でも多々ありますが、border設定で確認したり、
padding や line-heightを設定すると違いが見えてくるでしょう。
ただ、デザイン画像の縦横に不要な空スペースが開くとかなら別ですが、
少しくらいの違いは、範囲内で気になりません。
逆に味が出て良い場合もあります。

あとは、IEバグですね。必要なら設定するだけ。

補足

naokita様、ご回答をいただき、ありがとうございます。当方ではtransitionalにて作成しております。IEバグの設定について、アドバイスいただけませんでしょうか。先にも書きましたが、デザインをする際の最優先ブラウザをSafariにし、IE6・7で問題があったらIEバグが起こらないようにあらためて設定したいと考えてます。これについても、アドバイスをいただけましたらうれしいです。よろしくお願いいたします。

回答No.1

ORUKA1951

きちんとウェブ標準で作成し、IEのいくつかのバグを念頭に置いてCSSを書くだけですんでます。
＞レイアウトが大幅に型崩れしないような手法や鉄則
といえば、そのくらいしか思いつきません。
　私は、IEの継承してはならない祖先要素の大きさの問題と、floatに対する変な解釈以外は、これといった対策はしていませんが、大きくデザインが崩れる経験はありません。
　もうひとつの鉄則といえば、ウェブはデザインではなく、内容が命ですから、デザインに固執するあまり、内容を軽んじたり、文章構造を無視した変なソースを書かないということでしょうか？

補足

ORUKA1951様、ご回答をいただき、ありがとうございます。「IEのいくつかのバグ」について、詳しく説明しているサイトなどは
ございますでしょうか。　サイトを作成しているときは、複数のコンピューターで最低これら４つのブラウザでチェックはしているのですが、いつも個人で使い慣れているIE7を照準としてデザインし、IE6・FireFox・Safariでのチェックで問題があると修正するという感じですが、一向に解決しません。思いついたのは、たとえばSafarを照準としてデザイン、IE6・7でレイアウト崩れがあった場合に、前述のIEのバグが起こらないような指定をすればよいのでは、ということです。これについて、アドバイスいただけましたらうれしいです。よろしくお願いいたします。