Question

我正在创建一个网站，但Chrome和其他浏览器中的元素需要保证金，但在Safari中则不然。所以我想添加一个css行来修复它，但我找不到任何方法来为safari 3+添加css。

Answer 1

我相信这应该有用

    var userAgent = navigator.userAgent.toLowerCase(); 
    if (userAgent .indexOf('safari')!=-1){ 
       if(userAgent .indexOf('chrome')  > -1){
         //browser is chrome
       }else if((userAgent .indexOf('opera')  > -1)||(userAgent .indexOf('opr')  > -1)){
         //browser is opera 
       }else{
        //browser is safari, add css
       }
    }

这是检测浏览器版本的链接 https://stackoverflow.com/a/5918791

Answer 2

jQuery集成解决方案：

<script type="text/javascript">
$(function () {
if (navigator.userAgent.indexOf('Safari') != -1 && 
    navigator.userAgent.indexOf('Chrome') == -1) {
        $("body").addClass("safari");
    }
});
</script>

<style>
div {
  margin:20px;
}

.safari div {
  margin:0;
}
</style>

纯JS集成解决方案：

<style>
div {
  margin:20px;
}

.safari div {
  margin:0;
}
</style>
<body>
<script type="text/javascript"> 
if (navigator.userAgent.indexOf('Safari') != -1 && 
    navigator.userAgent.indexOf('Chrome') == -1) {
        document.body.className += " safari";
    }
</script>
</body>

Answer 3

这是不可能的，因为您也会将相同的属性应用于Chrome。 Chrome和Safari都使用-webkit-前缀。

但你可以用PHP做到这一点。

<?php
    $browser = get_browser();
    if(strtolower($browser->browser) == 'safari') {
        echo '<link href="safari.css" rel="stylesheet" type="text/css" />';
    } 
?>

将safari.css替换为您自己的样式表。感谢@theorise

Answer 4

在safari 9.0中（仅限，不是＆gt; 9.0）你现在可以在CSS中使用这个不错的黑客来做。你不需要任何JS代码。我做到了，它对我来说很好。使用这个黑客：

@supports (overflow:-webkit-marquee) and (justify-content:inherit) {

/* type your custom css code here */

}

它工作的原因是：Safari 9.0及更高版本具有功能检测功能。因此，通过检测专用于Safari的功能，您可以检测Safari。溢出：-webkit-marquee和justify-content：inherit专门用于safari。这就是为什么我们可以通过这个简单的CSS hack来检测safari。

Answer 5

由于默认边距不同，您可以尝试将所有边缘元素的边距和填充重置为0，然后再更改它，而不是添加更多代码来修复问题。这可以解决你的问题。

这完全是个人偏好，但我用以下内容开始我的所有网页：

*{
    margin:0;
    padding:0;
}

在执行此操作时，我从未遇到任何关于边距或填充的跨浏览器问题。

Answer 6

CSS-Tricks forum上有类似的问题。但答案基本上是，不。您可以尝试用户代理嗅探服务器端或JavaScript，然后向html添加一个类（就像HTML5 BoilerPlate中的旧IE版本一样）。

希望这有帮助。

- 被上面和下面的人殴打！

Answer 7

我已经尝试了几乎所有上述建议的解决方案，但是直到我看到我的话中的一段代码，一切都没有解决：

@-webkit-keyframes fadein { //code here }

它完成了这项工作并将所需的CSS应用于： Safari, Chrome and Opera > 12.1

希望这可以帮助某人。

如何仅为Safari添加css行

7 个答案: