• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン

2014/07/09

書いた人:
yanoppa!
カテゴリ:
CSS   HTML
24,290 views

IEのバグが多い場合。CSSハックを使って解消しましょう。IEだけじゃなくFirefox,Safariのハックも紹介!

【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]-->



この記事を読んだ人はこんな記事も読んでいます

<

>