ブラウザごとにCSSを振り分ける方法

http://www.designwalker.com/2006/12/css.html

↑こんなサイトがありました。

私は素人で、細かなスタイルシートの調整が苦手です。
特にブラウザ間の誤差については、お手上げ状態です。
そこで、何か簡単に解決できる方法はないものかと、色々探して、
上記サイトの情報を見つけました。

このサイトにあるように、ブラウザ毎に読み込ませるCSSを書くのは
手間はかかりますが、私の場合、あれこれ悩むよりは、時間の節約になりそうです。
このサイトを参照する限り、個々のブラウザを判別する情報は、下記のように理解することができるのですが、

□こんなに単純なのでしょうか?
□他に注意点はありますでしょうか?
□Internet Explorere8.0の場合は、どのように記述するのでしょうか?
□他にブラウザ毎に読み込ませるCSSを変えるには、どのような方法がありますか?

~上記サイトからの情報
1. Internet Explorer6.0に反映させるCSS=.testの前に* htmlと記入する
2. Internet Explorer7.0に反映させるCSS=.testの前に*:first-child+htmlと記入する
3. Firefoxに反映させるCSS=.testの前にhtml>bodyと記入する
4. Safari & Operaに反映させるCSS=.testの前にhtml:first-childと記入する

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:
  • 終了:2011/03/15 19:55:02
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答3件)

id:Galapagos No.1

回答回数963ベストアンサー獲得回数89

ポイント27pt

こんなに単純なのでしょうか?

単純です。

他に注意点はありますでしょうか?

もはやほとんど使われていないはずですが、Mac用IE5にも適用されてしまうものがあります。

Internet Explorere8.0の場合は、どのように記述するのでしょうか?

ファーストチャイルドハックを使います。


他にブラウザ毎に読み込ませるCSSを変えるには、どのような方法がありますか?

Webブラウザ別CSSハック」を参考にしてください。

id:pretaroe No.2

回答回数531ベストアンサー獲得回数75

ポイント27pt

>他にブラウザ毎に読み込ませるCSSを変えるには、どのような方法がありますか?

http://steel-plate.jp/blog/2009/01/28/320/

こういうの使ったほうが、かなり精度がたかくて悩まないと思いますが・・。


>その他

IEの場合はこのようなIF文が使えます。

http://webtech.seesaa.net/article/107726070.html

他のブラウザではコメントとして処理されますので誤作動もないです。

id:RespondentsQuality No.3

回答回数47ベストアンサー獲得回数9

ポイント26pt

私のホームページでもブラウザごとにCSSを振り分けていますが、以下の2行を記述することで対処できると思います。

<link class="style" rel="stylesheet" type="text/css" href="(ファイル名).css">・・・(1)

<@--[if IE]><link class="style" rel="stylesheet" type="text/css" href="(ファイル名).css">< ![endif]-- > ・・・(2)

※@の部分は、!に置き換えて使用してください。

(1)には、FirefoxやOpera,safariなどのスタイル設定と、ブラウザに依存しない(どのブラウザで開いてもデザインに変動のない要素のスタイル設定を記述したCSSファイルを指定し、(2)には、(1)で指定した要素のうち、IEで異なる要素のスタイル要素のスタイル指定をします。この(2)はIEでのみ読み込まれます。(IEのバージョンは関係ありません。)詳しくは以下のURLを見てください。

http://allabout.co.jp/gm/gc/23921/2/

Opera,Firefox,Safariなどの個別のスタイル指定ができませんが、このようにするのがブラウザ間の誤差を簡単に解決できる方法だと思います。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません