ブラウザごとに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が反映するので、ブラウザごとに修正できますね～。
|
|
|
February 29th, 2008 at 1:53 pm
この知識はすごく使えますね！
October 17th, 2008 at 5:21 pm
すごい！これは使えます。
ちなみに、私は、今、携帯キャリアによってCSSを振り分ける方法を探しているのですが、それはどうやればよろしいかご教授頂けませんでしょか。
November 9th, 2008 at 8:00 am
ブラウザごとにCSSを振り分ける方法…
せっかくスタイルシートを駆使してレイアウトを整えたのに、ブラウザがアップグレードしたりすると対応できなくてグチャグチャになったりします。そんなときはあっちこっちいじ……