如何區分Safari和Chrome在CSS中？

我知道我可以使用條件CSS來區分webkit瀏覽器和其他瀏覽器，但我的理解是Chrome和Safari都是webkit瀏覽器。我將如何區分兩者？ Safari瀏覽器有一個特定的修補程序，它可以在Nivo Slider變得很小時使像素化像素化，並且我需要使這兩種瀏覽器都能正常工作。如何區分Safari和Chrome在CSS中？

Safari的解決方法是：

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

我的條件代碼是：

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

謝謝！

來源

2014-07-03 Will

Chrome無法再WebKit的。谷歌去年放棄了它，並製作了自己的（眨眼）。 – Aibrean

@Aibrean -webkit-標籤仍然在最新的chrome中工作 – Banana

所以我發現我不需要這麼做（代碼似乎沒有在chrome中產生任何作用，所以我仍然有問題），但是知道如何區分鉻和safari可能對其他人有用。 – Will

如果您正在使用的JavaScript，這個代碼片段將在Chrome區分野生動物園：

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

對於CSS-只有破解，試試這個（不知道是否可行）：

/* 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); 
}

來源

2014-07-03 18:48:37

我一直在尋找一個僅限CSS的黑客攻擊，而你所建議的攻擊似乎並不奏效。 = / – Will

如何區分Safari和Chrome在CSS中？

回答

相關問題