MD.WEBLOG

長野県飯田市、フリーランス、ウェブデザイン、ホームページ制作、CMS構築、映像制作、エディトリアルデザイン - MITAMA DESING -

Go To Home

Blog

blogトップ > HTML / CSS > CSSハック一覧 -よく使うものをメモ- 【IE6、IE7、IE8、IE9、Firefox、Safari、chrome、Opera】


CSSハック一覧 -よく使うものをメモ- 【IE6、IE7、IE8、IE9、Firefox、Safari、chrome、Opera】

 2012年11月28日   タグ: , ,

CSSハック一覧 -よく使うものをメモ- 【IE6、IE7、IE8、IE9、Firefox、Safari、chrome、Opera】
ウェブ制作において、意外と手間取ってしまうのがブラウザチェックです。特にIE6、IE7あたりは、苦戦することが多いです。なるべくシンプルに、適切なマークアップをすることがまず第一の対処法ですが、どうしてもというときはCSSハックの登場です。今回は、CSSハックをメモしておきます。

Internet Explore

IE6のみ

#hack { _color:#ffffff; }
* html .hack {color:#ffffff;}

IE6以外

html>body .hack {color:#ffffff;}

IE7のみ

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

IE7以降

.hack {*color:#ffffff;}
html*.hack {color:#ffffff;}
IE8のみ

.hack{color:#ffffff\9;}

IE9のみ

.hack:not(:target){color:#fff¥9;}

IE以外

:root .hack{color:#fff;}

モダンブラウザ

Fire Fox のみ

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

Firefox 3.0以降

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

Firefox 3.5以降

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

Safari 2~3のみ

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

Safari 2~3.1のみ

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

Safari 3以上、Chromeのみ

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

Safari 3以上、Chrome、Opera 9以上、Firefox 3.5以上のみ

body:ntd-of-type(1) #hack{ color:#ffffff; }
body:first-of-type #hack { color:#ffffff; }

Opera 9.25以上

;;body #help_me { color:#ffffff; }
html:\66irst-child #hack { color:#ffffff; }
また、CSSハックを使わずに、条件付きコメントでIEのバグに対処する方法もあります。

CSSハックを使わずIE6、IE7、IE8を条件付きコメントでバグに対処!

このエントリーをはてなブックマークに追加

  |  Blog TOP   |