人気ブログランキング | 話題のタグを見る
<< コピペでできるCSSレイアウト... 今年もよろしくお願いいたします。 >>
 

ブラウザ毎にCSSの設定を切り分ける

はじめに


 CSSのレイアウトでブラウザの解釈の違いやバグなどによって、微妙に表示が崩れることってありますよね。 そんな時、裏技を使って各ブラウザ毎に設定を切り分ける方法が以下のサイトにあります。
どうしても、うまくできないときは使うのも良いかもしれませんね。

CSS Filters and Hacks





例えば

All Mozilla 0.6 - 1.6とWin IE 4.0 - 6.x で切り分けたいとします。
そんな時には、CSS Filters and Hacksのfiltering using CSS only をクリックし、All Mozilla 0.6 - 1.6の欄が N でWin IE 4.0 - 6.x  の欄がYの項目を選べばよさそうです。
 今回、私は * html selector を使うことにしました。説明を読むと Win IE 4.0 - 6.x にのみ機能させたい selector の頭に * html  を入れれば良さそうです。


 次の設定例は、id main に対して、All Mozilla 0.6 - 1.6のブラウザに対して padding-leftを20pxとし、Win IE 4.0 - 6.x のブラウザに、padding-left 10pxとする例です。

設定の一例



#main{padding-left:20px;}
*html #main{padding-left:10px;}

/*
 はじめに、#main{padding-left:20px;}ですべてのブラウザにpadding-left:20px;とし、Win IE 4.0 - 6.x のブラウザに対してのみ、padding-left 10pxとしています。
*/




最後に

あくまでも裏技的な方法なので、利用できないときもあるかもしれません。できるだけ標準な方法で記述して、どうしてもできないときなどに利用するのが良いかもしれませんね。

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-01-06 20:07 | ├CSS
<< コピペでできるCSSレイアウト... 今年もよろしくお願いいたします。 >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。