TOPCSSCSSハック一覧

CSSハック一覧

1.IE6以下のみ適用
sample
1.スターハック
* html #hack { color:#000000; }
2.アンダースコアハック #hack { _color:#000000; }
sample

別ウインドウで確認する
1.スターハック

2.アンダースコアハック

sample

1.セレクタの前に【*html 】をつける。(半角スペースも忘れずに)
IE4〜6、MacIE4〜5以下にのみ適用させる。Validator(※仕様に準拠しているかチェックしてくれるもの)に通る。

2プロパティの前に【_】アンダースコアをつける。
.IE4〜6にのみ適用させる。Validatorに通らない。

backtop
2.IE6のみ除外
sample

#hack {
color /**/:#000000;
}

sample sample

プロパティに続けて半角スペース/**/を入れるとIE6には適用されない。
Validatorに通る。

backtop
3.IE7のみ適用
sample

*:first-child+html #hack {
color:#ff0000;
}

sample sample

セレクタの前に【*:first-child+html 】をつけると、IE7にのみ適用される。
Validatorに通る。

backtop
IE7とモ4.ダンブラウザのみに適用
sample

html>body #hack {
color:#ff0000;
}

sample sample

セレクタの前に【html>body 】をつけると、IE7とモダンブラウザに適用される。
Validatorに通る。

backtop
5.IE7を除くモダンブラウザに適用
sample

html>/**/body #hack {
color:#ff0000;
}

sample sample

セレクタの前に【html>/**/body 】をつけると、IE7を除いたモダンブラウザに適用される。
Validatorに通らない。

backtop
6.safariのみ適用
sample

html:\66irst-child #hack {
color:#ff0000;
}

sample sample

セレクタの前に【html:\66irst-child】をつけると、Safariのみに適用される。
Validatorに通らない。

backtop
7.XHTML側の設定
sample

条件分岐コメント
<!--[if It IE 7]>
<link rel="stylesheet" type="text/css" href="css/test.css" media="screen" />
<![endif]-->

sample
sample

条件分岐コメント
IEの特定のバージョンにのみ、そのCSSを適用させることができるものです。

Sampleは、「IE7未満、つまりIE5〜6にだけ外部CSSを読み込ませる」という指定です。

backtop
8.clearfix
sample

.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/*IE7以外のモダンブラウザ向け*/

.clearfix{display:inline-block;} /*IE7およびMacIE5向け*/

/*Hides from IE-mac\*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/*End hide from IE-mac*/
/*IE6以前向け*/

 

sample
sample

floatさせた場合、きちんとclearしないと親要素のボックスから中身がはみ出てしまいます。

要素の最後にclear:bothを設定したdivを書き込んだりしても解決できますが、無駄なタグが増えるだけなので最近はclearfixを使っています。

backtop
Search



Recommendation



Search

クリックお願いします!!

クリコレ@With 人気Webランキングsozai-R 素材専門検索0574 Web Site Ranking206

Search