2011年04月11日
クロスブラウザ対策に使えるスタイルシートの記述
こんにちは、西本です。
以前まではブラウザのシェア率はＩＥの独壇場でしたが、
最近はFireFoxやGoogleChrome、Safariなど他のブラウザの
シェア率も上昇してきています。
弊社内でも、既定のブラウザをＩＥからGoogleChromeに変更しました。
ＩＥと比べると、やはりスピードは格段に違います。
しかしながら、自分が使っていないブラウザでも、他の方が使っている可能性がある。
自分のブラウザではページが崩れていなくても、
他のブラウザで見たら崩れている・・・なんていうことは、しょっちゅうあります。
むしろ、ＷＥＢ制作において避けては通れない問題といえるでしょう。
そこで、重要になるのが”クロスブラウザ対策”。
簡単に言うと、どのブラウザから見ても崩れていないページにするようにページを作成することです。
～クロスブラウザ対策において使えるスタイルシートの記述～
———————————————————————
IE6まで
———————————————————————
#header {
padding: 10px;
}
/* IEにのみ適用 */
*html #header {
padding: 5px;
}
または、
#header {
padding: 10px;
/* IEにのみ適用 */
_padding: 5px;
}
———————————————————————
IE7以降も
———————————————————————
#header {
padding: 10px;
/* IEにのみ適用 */
>padding: 5px;
}
———————————————————————
paddingやmarginは、ブラウザによって表示される余白幅が違ったりします。
その、たった1pxの差でも、ページが崩れてしまう原因となります。
そういう時に、上記の記述などを用いてクロスブラウザ対策を行う必要があります。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
いつもご覧いただいてありがとうございます。
次回の更新は何(カ)から中国関連についてレポートさせて頂きます。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－