ブラウザによる表示の違い

質問

今サイトを作成しています。
ＨＴＭＬ、ＣＳＳをはじめて１年の初心者です。
ブラウザは普段基本的にFirefoxを使用しています。
サイトの表示確認をFirefoxとIE7で行っているのですが２つのブラウザで微妙に表示がずれてしまいます。
色々調べてJavaScriptでブラウザを判別させてそれぞれに対応したページを用意するようなことが書かれていたんですがいまいちやり方がよくわかりません、、
やり方知ってる方助けてください。
もしくは他の対処法があるんでしたら教えていただけると助かります。
よろしくお願いします。

回答No.3

altrn · ベストアンサー

ブラウザによる表示の違いを解決（緩和する）方法としては、
おっしゃっているとおり、

1.ブラウザによって違うCSSを読ませる

のほかに、

2.ひとつのCSSをできるだけ差がないようにして使う

が考えられると思います。

-----------------

1の方法としては、
「IEのみにCSSを読ませる」
http://www.google.com/search?hl=ja&q=if+ie+css&btnG=%E6%A4%9C%E7%B4%A2&lr=&aq=f&oq=
と、
「IEハックとよばれる方法（CSSの一部分でIEのみに読み込ませる)」
http://www.google.com/search?&hl=ja&q=ie+%E3%83%8F%E3%83%83%E3%82%AF&btnG=%E6%A4%9C%E7%B4%A2&lr=&aq=f&oq=

また、基本的には上のふたつは、やろうと思えばどちらも同じことをできます。ですので、どちらかを使えるようになればいいでしょう。

基本的には、Firefox,Operaは結構似た表示をしてくれますが、IEだけが駄目、ということが多く、そのような場合は上の方法のどちらかを使うといいと思います。(FirefoxとOperaで違うCSSを使いたい場合、などで初めてJavascriptを使う必要があるかと...)

---------------

2の方法としては、ブラウザ間の表示の微妙な差異を吸収してくれる、
Yahooが提供しているreset.cssを使う方法があります。
http://developer.yahoo.com/yui/reset/
の、オレンジ色の枠の中の、"Download"のリンクからダウンロードして、
中にたくさん入っていますが、その中からreset.cssというファイルを見つけてください。
これを普通のcssと同じように読みこませれば、適用できたことになります。
ただし、これだけでは解決しないと思いますが...
詳細は
http://www.google.com/search?hl=ja&q=yui+css&btnG=%E6%A4%9C%E7%B4%A2&lr=&aq=f&oq=

---------------

私の場合は、できるだけひとつのCSSで同じように見えるようにがんばり、
この○○IEめ、と嫌になってたときは、あきらめて
IEハックか、IEだけにCSSを読ませる方法をとっています。

お礼

回答ありがとうございます！
Yahooが提供しているreset.cssは初めて知りました！
一応ダウンロードしてみたので状況に応じて使ってみたいと思います。
私もaltrnさんのようにできるだけひとつのＣＳＳで同じように見えるようにがんばってみます。
この○○IEめ、となったときは１の方法を使おうと思います＾＾；
知ってて損はなさそうなのでお勉強したいと思います！
まだまだ勉強不足ですね＾＾；
がんばります。

補足

あ、補足要求だからこっちに書かなきゃいけなかったのかな？？？
教えてgooも今日登録したばかりなもんで、、すみません＾＾；

回答No.5

altrn

No3で回答させていただいた者(altrn)です。

「補足要求」にしてしまったのは私のミスです。すみません、お気になさらず。

せっかくなので追記です。
ブラウザ間の見え方の差異を一度に確認してくれるサービスがあります。
以下のページなどで紹介されていますので、ご参考になれば。
http://www.techdego.com/2007/01/capture.php
http://gigazine.net/index.php?/news/comments/20060908_browsershots/

頻繁にはつかうものでもないと思いますが、
紹介されているサイトのうち、私は以下のサイトを利用しています。
http://browsershots.org/
もちろんすべてにチェックすると時間もかかるので、
特に日本で使われているブラウザ
IE(5.5,6,7),Firefox(1,2,3),Opera(9最新版),Safari(3.0,3,1)
のうちの、
Windows,Mac,Linux
くらいにチェックすれば十分ではないかとは思います。

はじめたばかりとのことで、
あまり情報が与えられすぎても
やることが増えすぎて大変かもしれませんが、
ご参考になれば幸いです。

お礼

追記までわざわざありがとうございます。
こんなサイトがあるんですね＾＾
あたしも試してみたいと思います！
２回もお答えいただいてありがとうございました＾＾

回答No.4

k0021

私は、ＨＰの表示チェックはIE5.5で使用してしていますが。
ルビ　縦書きを使用のためですが。
下記参考URLを参考に作成ました。
必要の項目を抜き出して使用しています。
使用例では、IEでFirefox等を使用の場合は警告メーセージ等もだしていますが。
参考までに、IE5.5とIE7でも表示が異なりますよ。

参考URL：

http://www.kisc.meiji.ac.jp/~pz03013/html/css_change.html

お礼

参考ＵＲＬありがとうございます＾＾
みなさんの意見を参考にしてサイトづくりにとりくみたいと思います。

回答No.2

noname#140925

ブラウザの判別方法は回答出ているようなので、別の視点から。

IE7への対応は不要です。
Microsoft自身、IE7は切り捨てました。
今から行うのなら、FireFoxとIE8で確認しましょう。

IE8ではW3Cの定める標準仕様に沿った形で実装され、それが標準になっています。
IE8にはIE7互換モードという物があり、これはIE7向けにページを作ってしまった残念なページを表示するためだけに存在します。

IE7自体不具合が多く、殆ど普及していませんので、IE7に合わせたページを作る意味が有りません。（IE7が標準になっているVistaも普及していませんし。）

お礼

わかりやすい回答ありがとうございます。
今調べてみたんですがIE8は今ベータ版なんですよね？
正式版はもうすぐでるんでしょうか？、、
でるなら正式版になってからダウンロードしてもいいかと思いまして。。

回答No.1

DIooggooID

ご参考

http://pzxa85.hp.infoseek.co.jp/www/wwwjsx29.htm

navigator.appVersion　を確認すると、使用しているブラウザの種類がわかります。
ご質問者様が経験なされたように、表示上の微妙なずれを、ブラウザ毎に、HTMLを書き分けて表示内容を一致させることができます。

お礼

早速回答ありがとうございます。
参考ページわかりやすいですね、
試してみます♪