【CSSハック】これだけあればなんとかなるハック集

【CSSハック】これだけあればなんとかなるハック集

おはこんばんちわ、真田・・もとい、やのっぱです(´・ω・｀)v

本日は主に可愛くも憎らしいIEたんが駄々をこねたときに役立つあれをメモします。

大体適切なマークアップをしていればほぼ解決できるものですが
ブラウザ毎にどぼしても言うこと聞かない！って時ありますよね？

そんなこともあろうかとこれを用意しておいた！！←真田ボケ回収
【CSSハック！！】

というわけで、よく使うCSSハックをメモメモ

※ハックを使う時は記述順に注意してください。バージョンの新しいものから記述しましょう。

IEシリーズ

IE9

.className:not(:target) { color:#fff\9;}

IE8以下

.className {color:#fff\9;}

IE7

*:first-child+html .className { color: #fff; }

IE6のみ

* html .className {color:#fff;}

モダンブラウザ（ほとんど使うことはないです）

Firefox

Firefox 3.5以降

.className, x:-moz-broken, x:last-of-type{ color:#ffffff; }

Firefox 3.0以降

.className, x:-moz-any-link, x:default { color:#ffffff; }

Fire Fox のみ

.className, x:-moz-any-link { color:#ffffff; }

webkit

Safari 3以上、Chromeのみ

@media screen and (-webkit-min-device-pixel-ratio:0) { 
.className { color:#ffffff; }
}

Safari 2～3.1のみ

html[xmlns*=""]:root .className { color:#ffffff; }

Safari 2～3のみ

html[xmlns*=""] body:last-child .className　{ color:#ffffff; }

IEの条件付きコメント

IE9のみ

<!--[if IE 9.0]>****<![endif]-->

IE8のみ

<!--[if IE 8.0]>****<![endif]-->

IE7のみ

<!--[if IE 7.0]>****<![endif]-->

IE6のみ

<!--[if IE 6.0]>****<![endif]-->

IE9以下

<!--[if lte IE 9.0]>****<![endif]-->

IE8以下

<!--[if lte IE 8.0]>****<![endif]-->

IE7以下

<!--[if lte IE 7.0]>****<![endif]-->

IE6以下

<!--[if lte IE 6.0]>****<![endif]-->