如何在CSS中区分Safari和Chrome?

问题描述

我知道我可以使用条件CSS来区分webkit浏览器与其他浏览器，但是据我了解，chrome和safari都是webkit浏览器.我如何区分两者?有一个野生动物园专用的修复程序，可使Nivo Slider变小时铬使它像素化，而我需要使这两种浏览器都能工作.

I know I can use conditional CSS to differentiate webkit browsers from others, but it is my understanding that both chrome and safari are webkit browsers. How would I differentiate between the two? There is a safari specific fix that makes chrome pixelate the Nivo Slider when it gets small, and I need to get this working for both browsers.

Safari修复程序是:

The Safari fix is:

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

我的条件代码是:

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

谢谢！

推荐答案

如果您使用的是JavaScript，则此代码段会将Safari与Chrome区别开来:

If you are using JavaScript, this code fragment will distinguish Safari from Chrome:

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

对于仅CSS的黑客，请尝试以下操作(不知道是否可行):

For a CSS-only hack, try this (don't know if it works):

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

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

For your specific case, with 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中区分Safari和Chrome?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！