我曾经根据http://www.webmonkey.com/2010/02/browser-specific_css_hacks/中提供的方法，使用以下CSS hack来针对基于WebKit的浏览器。
@media screen and (-webkit-min-device-pixel-ratio:0) {
#my-id { height: 100%; }
}
这段代码在我的开发环境下是可以工作的。但是，后来我发现它在生产环境下无法正常运行。我发现这是由于CSS优化器将 and 后面的空格删除导致的。以下CSS在Chrome中无法识别。
@media screen and(-webkit-min-device-pixel-ratio:0) {
#my-id { height: 100%; }
}
那么，@media screen and (-webkit-min-device-pixel-ratio:0) 到底是什么意思？
我知道 @media screen，但我以前没有在CSS文件中使用过 and。
为什么在 and 后面需要有空格？
就像你所说的那样，媒体查询本身用于过滤WebKit，因为它使用了-webkit-属性。
Chrome仅仅是在你说它无法识别时有点严格而已。
@media screen and(-webkit-min-device-pixel-ratio:0)
这是无效的CSS，因为在 and 关键字后面的空格是有意义的。这在CSS3媒体查询规范中已明确说明：
EXAMPLE 20
以下是格式不正确的媒体查询，因为在“and”和表达式之间没有空格不被允许。（这个保留给函数符号语法。）
@media all and(color) { … }
url()、rgb()和rgba()这样的东西。正如您所看到的，在这些示例中，函数名和开括号之间没有空格。
and不是一个函数，而只是一个关键字，用于表示媒体查询必须匹配您指定的媒体，并且布局引擎必须满足您放置在其后的表达式。括号-webkit-min-device-pixel-ratio:0只是将其标记为表达式。
补充说明：是的，这意味着您的CSS优化器存在错误 ;)这里是一个使用YUI压缩器的特殊注释的快速解决方法。
@media screen and/*!*/(-webkit-min-device-pixel-ratio:0) { ... }
只使用这个：
@media(-webkit-min-device-pixel-ratio:0) {
}