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