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

htmlもCSSもきれいに書いてるつもりでも、最後にブラウザチェックしてみるとブラウザごとに見え方が微妙に違って
最後の調整で意外と時間をかかってしまうことがあるんですよねぇ。。。

Internet Explorer6.0とFirefoxでは、きれいに見えるのに、Internet Explorer7.0でみるとズレてた・・・
Safariではズレズレ。。。

しかも、修正していくにつれてどんどんズレていく。。。こっちのブラウザにあわせたら、あっちのブラウザでズレ。。
なんて経験ございません?

っちゅうわけで、今回はブラウザごとにCSSを書く方法をご紹介。

例えば”test”って名前付けたクラスにCSSを書くと。。。

.test {
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

↑なんて、書きますよねぇ。。

こいつを。。。

1. Internet Explorer6.0に反映させるCSS

* html .test {
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

↑って書けば、Internet Explorer6.0に反映させられます。

2. Internet Explorer7.0に反映させるCSS

*:first-child+html .test {
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

↑って書けば、Internet Explorer7.0にだけ反映させられます。

3. Firefoxに反映させるCSS

html>body .test {
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

↑って書けば、Firefoxに反映させられます。

4. Safari & Operaに反映させるCSS

html:first-child .test {
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

↑って書けば、Safari & Operaに反映させられます。

このCSSを全部書けばそれぞれのブラウザごとにだけ、CSSが反映するので、ブラウザごとに修正できますね~。

デザインblogランキング

コメント No Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



No Responses to “ブラウザごとにCSSを振り分ける方法”

  1. 木下洋平 Says:

    この知識はすごく使えますね!

  2. とっしー Says:

    すごい!これは使えます。
    ちなみに、私は、今、携帯キャリアによってCSSを振り分ける方法を探しているのですが、それはどうやればよろしいかご教授頂けませんでしょか。

  3. Life is Beautiful Says:

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

    せっかくスタイルシートを駆使してレイアウトを整えたのに、ブラウザがアップグレードしたりすると対応できなくてグチャグチャになったりします。そんなときはあっちこっちいじ……

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ