ブラウザによって上手く表示されません

質問

CSSでデザインとレイアウトをして、それをブラウザに表示させた時、
OSとブラウザによって上手く表示されるものとそうでないのがあり、
それらをどうやって対処したらいいのか分かりません。

具体的には、MAC OS10 のIE5.2とFirefoxが正常に表示されるのに対し、
WINXPのIE7.0とSleipnirでは同じレイアウトの崩れ方をします。Firefoxは大丈夫でした。
逆もまた然りで、WINブラウザで正常に表示させようとすると、MACでは崩れてしまいます。

回答No.4

perlerz10

ブラウザごとにCSSを分けるのであればjavascript等をつかうと良いでしょう「ブラウザーリダイレクト」というキーワードで検索されれば山ほど見つかると思いますが、参考サイトでサンプルとしてあげているブラウザーリダイレクトのjavaスクリプトでほぼOKだと思います。各ブラウザと搭載エンジンに関することもこのサイトによく説明されていますのでチェックしてみてください。

これまでの回答者の方々が言われているように、ブラウザの表示結果の差異はそのブラウザの搭載するエンジンにより発生しますが、どのブラウザも搭載エンジンによりいくつかの系統に分けられます。
ブラウザの搭載エンジン系統的にはGecko系が９割とWin系が１割ですが、利用者数的にはこれが逆転してしまいますので困ったものです。
CSSに対する各ブラウザの挙動としては、Gecko系は融通が利きますが、Win系は上位CSSの要素をかなり厳密に継承してしまいますので、CSSの記載技術にもよりますが、Gecko系ブラウザをメインに検証用ブラウザにしていると、さてWin系でもチェックしてみますかとなったところで「なんでここが・・こうなるの」とCSSを頭から再度チェックなることも・・・。
でもCSSもそういった経験を積めばひとつのCSSでメインレイアウトに関してはOK、細かなところだけCSSを分けてというようにできるようになると思います。がんばってください。
ただし、Windowsの文字とMacの文字の表示格差だけはどうしようもないのでCSSを如何にきっちり作ってたとしても、・・・。

参考URL：

http://www.mozilla.gr.jp/standards/

回答No.3

protege323

CSSやJavaScriptはブラウザごとに表示が違ってしまうのは仕方が無い問題だと思います。(少なくとも僕はそう思ってます。)

極端な例かもしれないですが、産地が違えば同じ野菜でも味は異なってしまう。これはどうしようもないですよね。
そんな認識で良いと思います。
正確な話になるととブラウザのエンジンの違いなど下記MAN_MA_RUIさんのおっしゃる通りですね。

では、そのブラウザごとの表示の違いの対処方法ですが、
・Mac IEではこのCSSを適用する。
・Win IEではこのCSSを適用する。
・Win FirefoxではこのCSSを適用する。
と言った方法で見に来てくれたヒトのブラウザごとにスタイルシートを振り分けると良いと思います。
その方法は下記のページが参考になると思うので覗いてみてください。
http://cool-liberty.com/design/design_002.html
http://blog.worldending.jp/archives/2006/07/css.php

そんな面倒なCSSですが、便利なところもあって僕は結構好きです。
質問者さんも頑張ってくださいね。

回答No.2

MAN_MA_RUI

Sleipnirは基本的にIEのブラウザエンジンを使用します。
そのためIEとSleipnirの表示は基本的に同一だと考えて良いでしょう。
ただし、Geckoを使う場合はまた別ですけどね。

また、GeckoはFirefoxなどいろいろなブラウザに使われているブラウザエンジンですが、ソフトウェアのバージョンによってはブラウザエンジンのバージョンも変わります。
rv:1.4 Netscape 7
rv:1.7 Netscape 8,Firefox 1,Mozilla 1.7,Sleipnir
rv:1.8.0 Firefox 1.5,SeaMonkey 1.0,Camino 1.0,Lunascape (1.8beta)
rv:1.8.1 Firefox 2,SeaMonkey 1.1,Camino 1.1
rv:1.9 Firefox3 (開発中)

回答No.1

yambejp

具体的な書式を書いた方が回答がしやすいかと。
基本的にはブラウザごとにクセがあるので、それを吸収するような
書式をかくしかありませんね