css - 如何在 CSS 中区分 Safari 和 Chrome？

Question

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

Safari 修复是:

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

我的条件代码是:

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

谢谢!

Answer 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);
}