2006/06/29: CSSの振り分けテクニック
よく使うのですぐにコピペ出来るようにまとめておきます。
■Mac版IE 5.x
MacIEが「*/」の直前に「\」をつけるとコメント終了を認識できないバグを利用したテクニック。
■Win版IE+Mac版IE
IEではCSS2の仕様では優先されるべき「!important」タグが無視される。
<例>
▽ 2006.07.23 三尾追記
■Win版IE (2006.07.23 三尾追記)
全てのWindows版IE以外に他と違う設定をする。
■Win版IE (2010.03.30 寺田追記)
もはや、Mac版IEとかIE5とかは無視してもいい時代なので、上みたいな面倒な書き方ではなくてこれだけでいいと思います。
IE6とIE7にだけCSSを上書きしてやる書き方です。
あと、良く使うmin-heightの書き方も定型文化しとくといいでしょう。
トラックバックURL
■Mac版IE 5.x
MacIEが「*/」の直前に「\」をつけるとコメント終了を認識できないバグを利用したテクニック。
ここはMacIEだけに適用
/*↑Style for MacIE5.x\*/
ここでそれ以外のブラウザ向けに上書き
/*↑Style for Others*/
/*↓Style for Others\*/
ここはMacIEに適用されない
/*↓Style for MacIE5.x*/
MacIE、その他全てに適用される
■Win版IE+Mac版IE
IEではCSS2の仕様では優先されるべき「!important」タグが無視される。
!important
<例>
#fugefuge
{
background:black;!important
background:white; /*←IE用スタイル*/
}
▽ 2006.07.23 三尾追記
/*Win IE以外のブラウザ用 */
.hoge{ background:black; }
/*IE5.01 と IE5.5 と IE6 に対応したパターン*/
* html .hoge{
background:white;
}
■Win版IE (2006.07.23 三尾追記)
全てのWindows版IE以外に他と違う設定をする。
body {width:100px; } /* winIEのみ */
*html>body {width:200px; } /* winIE以外 */
■Win版IE (2010.03.30 寺田追記)
もはや、Mac版IEとかIE5とかは無視してもいい時代なので、上みたいな面倒な書き方ではなくてこれだけでいいと思います。
IE6とIE7にだけCSSを上書きしてやる書き方です。
div.hoge
{
/* 通常スタイル */
}
/* IE 6 */
* html div.hoge
{
/* IE6用通常スタイル */
}
/* IE 7 */
*:first-child+html div.hoge
{
/* IE7用通常スタイル */
}
あと、良く使うmin-heightの書き方も定型文化しとくといいでしょう。
div.hoge
{
min-height: 600px;
height: auto !important;
height: 600px;
}
mio : 2006/07/23 - 03:00:29
!important
は有効になってましたよ。
細かいことは試してないので分からないですが。