どうしてもブラウザ間で挙動が異なってしまって別の対応をしなくてはならないことがある。
今回はChromeだけheightを1pxにしたくて、他のブラウザは100%にしたいってことがあった。
調べたらWebkit系列のGoogle Chromeだけ特別にcssを適用するには、以下のように記述すればいいらしい.
@media screen and (-webkit-min-device-pixel-ratio:0) {
.abc { height:1px; }
}
上記のabcってところはいつも通りCSSで指定したいものを記述.
上記の@mediaより前に他のブラウザに適用するCSSを書いておけば、それらはInternetExplorerやFirefoxに適用される. 最後に記述しているmediaだけがWebkit系列に適用される.
