CSSをFirefoxのみ、又はWebkitのみに反映する

ブラウザ動作で細かい違いにハマって、時間を大幅にロスしてしまう場合があったりします。
そんな時は個々のブラウザにCSSの当て方を変えてあげると、うまくいきます。

Firefoxのみ

@-moz-document url-prefix() {
	Selector {
		style
	}
}

Webkit系のみ

@media screen and (-webkit-min-device-pixel-ratio:0) {
	selector {
		style
	}
}

これで解決です。

レガシーブラウザ(ie6,7,8)について

久しぶりにIE6以上対応のサイトコーディングをしました。しかもパララックス!泣きそうです。

CSSハックとかずいぶんやっていなかったので、すっかり忘れていました。

property: value; // 全部
property: value\9; // ie8以下
*property: value; // ie7以下
_property: value; // ie6以下

に加えてmin-heightが

min-height: 200px;
height: auto !important;
*height: 200px;

という感じだった。え?Invalidですって?
細かいことはいーんすよ・・・たぶんね

その他には、

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

とか、

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />

とか。
IE8をIE7でレンダリングしようして、content=”IE=7; IE=9″にするとIE8はIE8でレンダリングしてしまう。
content=”IE=EmulateIE7; IE=EmulateIE9″とするのがポイントのようだ。
IE=EmulateIE100としても、IE=EmulateIE9になってしまうみたい。

ふー、いつになったら、ie6を切り捨てられるのか。