CSS Hacks、Firefox 3.5 和谷歌浏览器

Posted 2023-02-21

【中文标题】CSS Hacks、Firefox 3.5 和谷歌浏览器

【英文标题】：CSS Hacks, Firefox 3.5 and Google Chrome

【发布时间】：2010-12-24 23:20:03

【问题描述】：

我四处搜索，据称body:nth-of-type(1) 在 CSS 中仅针对 Safari 和 Google Chrome。

你瞧，Mozilla 也能正确读取它。我又搜索了十次，但一无所获，所以我来了。

是否存在仅限 Google Chrome 浏览器的 CSS hack？

【参考方案1】：

@supports 功能检测现在适用于 Chrome 28 及更高版本。

/* Chrome 28+ */

@supports (-webkit-appearance:none)  .selector  color:red;  

我将此发布到 browserhacks - 所以要么在 browserhacks.com 上进行测试，要么在我的个人 css hacks 测试站点http://browserstrangeness.bitbucket.org/css_hacks.html#chrome 进行测试。

我还为特定的较新版本制定了许多其他方法。我希望你喜欢它们。

【参考方案2】：

@media screen and (-webkit-min-device-pixel-ratio:0) ... styles go here ...

只有 Chrome (AFAIK) 没有 CSS，只有 Chrome 和 Safari。您可以考虑使用 javascript 解决方案。

2013 年 1 月 22 日更新：正如 cmets 中所述，这可能不再安全。我找不到合适的替代品。

【讨论】：

当我添加你上面的 CSS 时，firefox 和 IE 有点不稳定，不要阅读我在@media 屏幕块下方的任何 CSS。你知道可能出了什么问题吗？

我刚刚将 CSS 代码添加到页面底部 - 解决了这个问题。谢谢！

这可能不再是针对 WebKit 浏览器的可靠方法，因为浏览器供应商已经开始采用 webkit 前缀以及他们自己的前缀：glazman.org/weblog/dotclear/index.php?post/2012/02/09/…

【参考方案3】：

最好避免此类黑客攻击，因为它们取决于新兴标准的可用性。很明显，随着时间的推移，新兴标准将越来越多地出现在更多平台上。换句话说，假设给定的浏览器是[某些特定的浏览器]是错误的，因为它具有[某些特定的 CSS 功能]。

Eric Wendelin 的回答非常适合针对 WebKit 浏览器。还有一种针对 Gecko 浏览器的好方法：

@-moz-document url-prefix() 
    /* Gecko-specific CSS here */

添加 WebKit 定位（感谢 Eric Wendelin）：

@media screen and (-webkit-min-device-pixel-ratio:0) 
    /* Webkit-specific CSS here */

您也可以可靠地使用 CSS hacks within 结构的“特征检测”样式来隔离版本，因为您已经正确隔离了引擎，并且可以更安全地假设给定引擎版本之间的功能差异不会随着时间而改变。

显然，隔离 IE 及其各种版本的最佳方法是使用条件 cmets，IE 已支持许多版本。

【参考方案4】：

任何 -webkit 选择器都应该只适用于 Chrome 和 Safari。

http://qooxdoo.org/documentation/general/webkit_css_styles

希望这是您正在寻找的。这是 webkit 网站：

http://webkit.org/