人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ブラウザごとに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と記入する

●質問者: supermaster
●カテゴリ:ウェブ制作
✍キーワード:BODY CSS firefox HTML Internet Explorer
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● Galapagos
●27ポイント

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

単純です。

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

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

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

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


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

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


2 ● pretaroe
●27ポイント

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

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

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


>その他

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

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

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


3 ● RespondentsQuality
●26ポイント

私のホームページでもブラウザごとに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などの個別のスタイル指定ができませんが、このようにするのがブラウザ間の誤差を簡単に解決できる方法だと思います。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ