可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am making a website, but an element needs margin in Chrome and other browsers, but not in safari. So I want to add a css line to fix it, but I can't find any method to add css for safari 3+ only.

回答1:

This is not possible since you would be applying the same property to Chrome as well. As Chrome, and Safari both use the -webkit- prefix.

But you could do this in PHP.

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

Replace safari.css with your own stylesheet. Credit to @theorise

回答2:

I believe this should work

Fiddle : http://jsfiddle.net/kHFjM/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
       }
    }

here is the link to detect the browser version https://stackoverflow.com/a/5918791

回答3:

jQuery integrated solution:

<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>

Pure JS integrated solution:

<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>

回答4:

In safari 9.0+ you can do it now in CSS with this nice hack. You don't need any JS code. I did it and its working fine for me. Use this hack:

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

/* type your custom css code here */

}

The reason it is working is: Safari 9.0 and above have feature detection. So by detecting a feature which is exclusively for Safari you can detect Safari. overflow:-webkit-marquee and justify-content:inherit are exclusively for safari. Thats why we can detect safari with this simple CSS hack.

回答5:

Instead of adding more code to fix your problem, since the default margins are different, you could try resetting all off the margins and paddings of surrounding elements to 0 first before changing it. That could solve your issue.

It's completely a personal preference, but I start all of my webpages with:

*{
    margin:0;
    padding:0;
}

I've never had any cross browser issues regarding margins or padding while doing this.

回答6:

There is a question similar to this on the CSS-Tricks forum. But the answer is basically, nope. You could attempt user-agent sniffing server side or with JavaScript and then add a class to the html (like for old IE versions in HTML5 BoilerPlate).

Hope this helps.

--beaten to it by the guys above and below!