发表新帖
发表新帖

How do I add a css line ONLY for Safari

后端 未结
关注
7 1493
轮回少年
轮回少年 2020-12-28 11:03

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 ad

相关标签:
7条回答
  • 隐瞒了意图╮
    2020-12-28 11:09

    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>
    0 讨论(0)
  • 小蘑菇
    2020-12-28 11:09

    I have tried almost all of the above-suggested solutions, but nothing is working around until I saw a piece of code in my says:

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

    And it did the job and applied the required CSS for: Safari, Chrome and Opera > 12.1

    Hope this can help someone.

    0 讨论(0)
  • 南旧
    2020-12-28 11:10

    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

    0 讨论(0)
  • 眼角桃花
    2020-12-28 11:13

    In safari 9.0 (only, not > 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.

    0 讨论(0)
  • 北海茫月
    2020-12-28 11:21

    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

    0 讨论(0)
  • 天涯浪人
    2020-12-28 11:24

    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!

    0 讨论(0)
 看不清?
提交回复
热议问题