CSS Hacks、Firefox 3.5 和 Google Chrome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1876156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Hacks, Firefox 3.5 and Google Chrome
提问by Sotkra
I searched around and allegedly, body:nth-of-type(1)is used in CSS to target only Safari and Google Chrome.
我四处搜索，据称，body:nth-of-type(1)在 CSS 中使用仅针对 Safari 和 Google Chrome。
Lo and behold, Mozilla reads it properly too. I searched ten times more but came up with nothing, so here I am.
瞧，Mozilla 也能正确读取它。我又搜索了十次，但一无所获，所以我来了。
Is there a Google Chrome-only CSS hack?
是否有仅限 Google Chrome 的 CSS hack？
回答by Eric Wendelin
@media screen and (-webkit-min-device-pixel-ratio:0) { ... styles go here ... }
@media screen and (-webkit-min-device-pixel-ratio:0) { ... styles go here ... }
There is no CSS for onlyChrome (AFAIK) but Chrome AND Safari. You may consider a Javascript solution.
没有仅适用于Chrome (AFAIK) 的CSS，但适用于 Chrome 和 Safari。您可以考虑使用 Javascript 解决方案。
UPDATE Jan 22, 2013: As mentioned in the comments, this may no longer be safe. I could not find a suitable alternative.
2013 年 1 月 22 日更新：如评论中所述，这可能不再安全。我找不到合适的替代品。
回答by eyelidlessness
It's best to avoid these kinds of hacks, as they depend on the availability of emerging standards. Quite obviously, emerging standards will increasingly be available on more platforms as time goes on. In other words, it's a mistake to assume that a given browser is [some specific browser] because it has [some specific CSS feature].
最好避免此类黑客攻击，因为它们取决于新兴标准的可用性。很明显，随着时间的推移，新兴标准将越来越多地在更多平台上可用。换句话说，假设给定的浏览器是 [某个特定的浏览器] 是错误的，因为它具有 [某个特定的 CSS 功能]。
Eric Wendelin's answer is a good one for targeting WebKit browsers. There's also a good way to target Gecko browsers:
Eric Wendelin 的答案是一个很好的针对 WebKit 浏览器的答案。还有一种针对 Gecko 浏览器的好方法：
@-moz-document url-prefix() {
/* Gecko-specific CSS here */
}
Add in WebKit targeting (thanks Eric Wendelin):
添加 WebKit 定位（感谢 Eric Wendelin）：
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit-specific CSS here */
}
You can probably also reliably use the "feature-detection" style of CSS hacks withinconstructs like that to isolate versions, as you've already correctly isolated the engine, and you can more safely assume that the feature disparity between versions of a given engine won't shift over time.
您可能还可以在类似的构造中可靠地使用 CSS hack 的“特征检测”样式来隔离版本，因为您已经正确地隔离了引擎，并且您可以更安全地假设给定引擎版本之间的特征差异不会随着时间推移而改变。
Obviously the best way to isolate IE and its various versions is to use conditional comments, which IE has supported for many versions.
显然，隔离 IE 及其各种版本的最佳方法是使用条件注释，IE 已支持许多版本。
回答by Jeff Clayton
The @supports feature detection works for Chrome 28 and newer now.
@supports 功能检测现在适用于 Chrome 28 和更新版本。
/* Chrome 28+ */
@supports (-webkit-appearance:none) { .selector { color:red; } }
I posted this to browserhacks - so either test it at browserhacks.com or my live personal css hacks test site at http://browserstrangeness.bitbucket.org/css_hacks.html#chrome.
我将此发布到 browserhacks - 所以要么在 browserhacks.com 上测试它，要么在http://browserstrangeness.bitbucket.org/css_hacks.html#chrome 上我的实时个人 css hacks 测试站点。
There are many others there that I have worked out for specific newer versions as well. I hope you enjoy them.
我还为特定的较新版本设计了许多其他版本。我希望你喜欢它们。
回答by tahdhaze09
Any of the -webkit selectors should work for just Chrome and Safari.
任何 -webkit 选择器都应该只适用于 Chrome 和 Safari。
http://qooxdoo.org/documentation/general/webkit_css_styles
http://qooxdoo.org/documentation/general/webkit_css_styles
Hope this is what you're looking for. Here's the webkit website:
希望这就是你要找的。这是 webkit 网站：
