11

我正在制作一个网站，但一个元素在 Chrome 和其他浏览器中需要边距，但在 safari 中不需要。所以我想添加一条 css 行来修复它，但我找不到任何方法只为 safari 3+ 添加 css。

4

8 回答 8

12

我相信这应该有效

小提琴：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
       }
    }

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

于 2013-07-14T09:00:41.153 回答
10

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>
于 2013-07-14T08:59:10.403 回答
9

这是不可能的，因为您也会将相同的属性应用于 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

于 2013-07-14T09:00:27.873 回答
6

在 safari 9.0（仅限，而不是 > 9.0）中，您现在可以通过这个漂亮的 hack 在 CSS 中做到这一点。您不需要任何 JS 代码。我做到了，它对我来说很好。使用这个技巧： 

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

/* type your custom css code here */

}

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

于 2015-10-30T04:21:36.137 回答
4

这对我来说适用于新旧 Safari 浏览器：

@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance: none) {
    /* Safari Only CSS here */
  }
}
于 2021-09-01T06:45:58.527 回答
1

由于默认边距不同，因此无需添加更多代码来解决您的问题，您可以尝试在更改之前先将周围元素的所有边距和填充重置为 0。那可以解决你的问题。

这完全是个人喜好，但我的所有网页都以：

*{
    margin:0;
    padding:0;
}

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

于 2013-07-14T09:01:26.757 回答
0

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

希望这可以帮助。

——被上面和下面的家伙打败了！

于 2013-07-14T09:00:56.917 回答
0

我已经尝试了几乎所有上述建议的解决方案，但是在我看到我说的一段代码之前，没有任何解决方法：

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

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

希望这可以帮助某人。

于 2019-07-23T17:02:20.837 回答