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

December 8th, 2006

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

Star Wars - ハン・ソロ mimobot 1GB USBフラッシュメモリ

価格（税込）: ￥ 6,250

Star Wars - C-3PO mimobot 1GB USBフラッシュメモリ

価格（税込）: ￥ 6,250

Star Wars - ボバ・フェット mimobot 1GB USBフラッシュメモリ

価格（税込）: ￥ 6,250

この記事に関連する記事

この記事のタグ

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

木下洋平 Says:
February 29th, 2008 at 1:53 pm
この知識はすごく使えますね！

DesignWalker