ブラウザの見え方の違いについて教えてください。

質問

CSSで只今苦戦苦闘しております。
前回、TABLEタグを使用してデザインを組んでいいのかどうかということを質問させていただきました。
ご回答していただき本当にありがとうございました。

今回も、わからなかったので質問させていただきました。CSSでwidthやmargin、そして前回教えていただいた通り
TABLEを使わずDIVタグを使用して作っています。IEで確認しながら作っていたのですがブラウザの種類によっては
デザインがぐちゃぐちゃになってしまう。と効いたのでファイアーフォックスとsafariというブラウザを
インストールして両方で確認しましたところ、「ぐちゃぐちゃ」になっていました（涙）

どのようになってしまったかといいますと、DIVタグで指定した大きさがIEとファイアーフォックスでは違う見え方をしてしまいます。
marginの大きさは変わらなかったのですが、widthの大きさが少し違ってしまったり画像を設定したのに表示されなかったりしてしまいます。（たぶんこれはwidthの幅が上手く設定できていないからだと思います。）
話が長くなってしまいましたが、聞きたいことは・・・。
１．ブラウザによっては読み込みの出来ないCSSプロパティというのがあるのでしょうか。（Javascriptはあるようですけど・・・。）

２.それと「これ通りにやれば、どのブラウザでも見え方が同じになる！」といった方法や、みなさんがどのようにブラウザの問題を克服（？）されたか教えてもらえませんか？あとできれば、克服のためのお勧めサイトでもありましたら教えていただけませんでしょうか。よろしくおねがいします。

回答No.2

dezimac · ベストアンサー

最大の間違いは、IEを過信する事です。
Windows版IEは、w3mの推奨するweb標準（強制では無い）を無視する代わりに、どんな無茶苦茶なHTMLやCSSでも独自解釈して表示できる素晴らしいブラウザです。
FirefoxやSafari等の他のブラウザはw3mの推奨する標準にほぼ従っています。

まずは、Firefoxで思ったように見えるように作る事です。
その上で問題児のIE用に調整した方が楽ですよ。

IEでしか理解できないような書き方とかあるので、それでIE用の記述をすればいいです。
「CSSハック」で検索すればいくらでもでてきます。

CSSハック一覧　HTML│CSSタグ辞書
http://d-lover.com/css/hack.shtml

DOCTYPE宣言がないとIE7でも表示は古いまま - ［ホームページ作成］All About
http://allabout.co.jp/internet/hpcreate/closeup/CU20070115B/

参考URL：

http://d-lover.com/css/hack.shtml

お礼

なるほど!FireFoxが基準なんですね。ありがとうございます。
IEってそんなに厄介なブラウザだったんですね（涙）

「IEでしか理解できないような書き方とかあるので、それでIE用の記述をすればいいです。」ってことはFIREFOXをメインでCSSを組んでゆき、それでIE用をさらに追加するってことですよね。がんばってみます。
参考リンクありがとうございます。参考にしていただきます。

貴重な意見ありがとうございました。

補足

dezimacさんに教えて頂いたことやサイトを見ていろいろとやってみたのですが、なかなか。
やはりmarginの設定が難しいです。divタグ内ではなく、ただ普通にbodyにCSSでmargin-bottom:100px;と設定しても変わらなかったり・・・。marginはとても厄介な代物ですね。

回答No.1

Tacosan

あえてシビアな表現をすると, 「どのブラウザでも同じように見える」ような書き方は存在しない, とすら言えます.
視覚障害者用の「読み上げるブラウザ」と Firefox で「同じように見える」ことが期待できると思いますか?

お礼

なるほど・・・。そういうことですか。シビアなんですね。
回答してください、ありがとうございました。