如何在 CSS 中区分 Safari 和 Chrome？

【问题标题】：How can I differentiate Safari and Chrome in CSS?如何在 CSS 中区分 Safari 和 Chrome？
【发布时间】：2014-08-25 00:00:04
【问题描述】：

我知道我可以使用条件 CSS 来区分 webkit 浏览器和其他浏览器，但我的理解是 chrome 和 safari 都是 webkit 浏览器。我将如何区分两者？有一个 safari 特定的修复程序，当 Nivo Slider 变小时，它会使 chrome 像素化，我需要让这两个浏览器都能正常工作。

Safari 的修复方法是：

img{
    -webkit-transform: translate3d(0, 0, 0);
}

我的条件代码是：

[if Webkit] img {
     -webkit-transform: translate3d(0, 0, 0);
}

谢谢！

【问题讨论】：

Chrome 不再是 webkit。 Google 去年放弃了它并自己制作了 (Blink)。
@Aibrean -webkit- 标签在最新的 chrome 中仍然有效
所以我发现我毕竟不需要这样做（代码在chrome中似乎没有什么区别，所以我还是有问题），但知道如何区分chrome 和 safari 可能对其他人有用。

标签： css browser

【解决方案1】：

如果您使用 JavaScript，此代码片段将区分 Safari 和 Chrome：

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
    $('html').addClass('safari-only');
}

对于纯 CSS 的 hack，试试这个（不知道它是否有效）：

/* Safari only */
.myClass:not(:root:root) { 
}

针对您的具体情况，使用 JavaScript：

JS：

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
    $('img').addClass('safari-only');
}

CSS：

img.safari-only {
     -webkit-transform: translate3d(0, 0, 0);
}

仅限 CSS：

img:not(:root:root) {
     -webkit-transform: translate3d(0, 0, 0);
}

【讨论】：

我一直在寻找一种纯 CSS 的 hack，而您建议的那个似乎不起作用。 =/