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

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

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

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

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

例えば"example"って名前付けたクラスにCSSを書くと

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

↑例えば上のように書きますよね
これを・・・

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

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

↑のように書けば、Internet Explorer6.0に反映させられます。

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

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

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

3. Firefoxに反映させるCSS

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

↑のように書けば、Firefoxに反映させられます。

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

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

↑のように書けば、Safari & Operaに反映させられます。

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

trans-log