ブラウザごとに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が反映するので、ブラウザごとに修正できますね~。

関連記事

コメントはまだありません

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

  2. ピンバック: Life is Beautiful

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です