是否有针对Safari的CSS hack（仅适用于Chrome）？

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  #safari { display: block; } 
} 

#1 楼

针对CATALINA和SAFARI 13的更新（2020年初更新）*

请-如果您遇到麻烦，并且真的想获得帮助或通过发表评论来帮助他人，发布您的浏览器和设备（带有浏览器和操作系统版本号的MacBook / IPad / etc ...！）
声称这些工作都不是准确的（实际上甚至是不可能的。）其中许多都不是真的' hacks，但是代码内置在Apple的Safari版本中。需要更多信息。我喜欢您来到这里的事实，并真的希望事情能为您解决。
如果您在从这里获取一些东西在您的网站上工作时遇到问题，请通过以下链接检查测试网站-如果被黑客入侵正在那里工作，但不在您的站点上，黑客不是问题-您的站点正在发生其他事情，通常只是如下所述的CSS冲突，或者也许没有任何作用，但是您可能没有意识到自己实际上不是完全使用Safari。请记住，此信息是为了帮助人们（希望）解决短期问题。
测试站点：
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
和镜像！
https://browserstrangeness.github.io/css_hacks.html#safari
注意：过滤器和编译器（例如SASS引擎）需要标准的“跨浏览器”代码-而不是CSS hacks这些意味着它们将重写，销毁或删除这些hack，因为这不是hack所做的。其中大部分是非标准代码，这些代码经过精心设计，仅针对单个浏览器版本，如果更改了它们，将无法正常工作。如果您希望将它们与之配合使用，则必须在任何过滤器或编译器之后加载所选的CSS hack。这似乎是一个定理，但人们之间有很多困惑，他们没有意识到他们正在通过不是为此目的设计的软件运行黑客来消除黑客。
自6.1版以来，Safari发生了变化，正如许多人注意到的那样。
请注意：如果您在iOS上使用Chrome [以及现在也在使用Firefox]（至少在iOS版本6.1和更高版本中），并且您想知道为什么这些黑客似乎都没有将Chrome与Safari分开，这是因为iOS的Chrome版本正在使用Safari引擎。它使用的是Safari hack，而不是Chrome hack。有关此信息的更多信息，请访问：https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ iOS版Firefox于2015年秋季发布。 Safari Hacks，但没有一个与iOS Chrome相同的Firefox。 ）-您尝试的黑客行为，使用的浏览器（精确版本！）以及使用的设备。没有这些额外的信息，我或这里的任何其他人都无法为您提供帮助。
通常这只是简单的解决方法，或者缺少分号。使用CSS通常是样式表中列出的代码或代码顺序的问题，而不仅仅是CSS错误。请在测试站点的此处进行测试。如果能够在此处正常运行，则说明该hack确实适用于您的设置，但这是需要解决的其他问题。这里的人确实很乐于提供帮助，或者至少可以为您指明正确的方向。
这里的垃圾使您可以使用Safari的最新版本。
您应该尝试使用此工具首先，因为它涵盖了当前的Safari版本，并且仅适用于纯Safari：
此版本仍可与Safari 13（2020年初）一起正常使用：

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

要涵盖6.1及更高版本，此时，您必须使用下一个CSS技巧。一个用于6.1-10.0的处理程序，一个用于处理10.1及更高版本的处理程序。删除它。

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

如果SCSS或其他工具集在嵌套媒体查询中遇到问题，请尝试以下方法：

/* Safari 10.1+ (alternate method) */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

下一个仅适用于6.1-10.0，但不适用于10.1（2017年3月下旬更新）
我通过结合多个其他hacks进行了数月的测试和试验，创建了此hack。
注意：以上，双重媒体查询并非偶然-排除了许多无法处理媒体查询嵌套的旧版浏览器。 -“ and”后的空格也很重要。毕竟，这是一种黑客行为，并且是目前唯一适用于6.1和所有较新Safari版本的黑客行为。另外请注意，如以下注释中所列，该hack是非标准的css，必须在过滤器之后应用。诸如SASS引擎之类的过滤器将完全重写/撤消或完全将其删除。
如上所述，请检查我的测试页以查看其按原样运行（未经修改！）
这是代码：

/* Safari 6.1-10.0 (not 10.1) */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

有关更多“特定于版本”的Safari CSS，请继续阅读以下内容。

/* Safari 11+ */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

Safari 11.0的一个：

/* Safari 11.0 (not 11.1) */

html >> * .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

Safari的一个10.0：

/* Safari 10.0 (not 10.1) */

_::-webkit-:host:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

10.1（仅适用于）的稍作修改::

/* Safari 10.1 */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

Safari 10.0（非iOS设备）： hacks：
一个简单的支持Safari 9.0及更高版本的功能查询hack：

/* Safari 10.0 (not 10.1) but not on iOS */

_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

一个Safari 9.0或更高版本的简单下划线hack：

@supports (-webkit-hyphens:none)
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

另一个Safari的功能9.0及更高版本：

_:not(a,b), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

以及另一个支持功能的查询：

/* Safari 9+ */

_:default:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

Safari 9.0-10.0的一个：检测，因此我们现在就可以使用它。

/* Safari 9+ */

@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}

现在仅定位到iOS设备。如上所述，由于iOS上的Chrome根植于Safari，因此它当然也适用于该浏览器。还有一个适用于Safari 9.0-10.0但不适用于iOS设备的版本：

/* Safari 9.0-10.0 (not 10.1) */

_::-webkit-:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

以下是将6.1-7.0和7.1+分开的黑客为了获得正确的结果，这些还需要结合多种黑客手段：

/* Safari 9 */

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

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

由于我已经指出了阻止iOS设备的方法，因此这是针对非-iOS设备：

/* Safari 9.0 (iOS Only) */

@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

要使用它们：

/* Safari 9+ (non-iOS) */

_:default:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

通常[像这个问题]人们问有关Safari hack的原因主要是关于将其与Google Chrome分开（再次不是iOS！）。
发布替代方法可能很重要：如何也将Safari和Safari分别定位为目标，因此我在此处为您提供
这是基本知识，请再次在我的测试页上查看许多特定版本的Chrome，但这些通常涵盖了Chrome。 Chrome是45版，Dev和Canary版本目前是47版。
我放在浏览器上的旧媒体查询组合仍然仅适用于Chrome 29+：

/* Safari 9.0-10.0 (not 10.1) (non-iOS) */

_:-webkit-full-screen:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

An @支持功能查询，同样适用于Chrome 29+，也适用于...下面是我们用于Chrome 28+的功能的修改版。 Safari 9，即将到来的Firefox浏览器和Microsoft Edge浏览器都无法使用此功能。这是我看到它包含在其他CSS代码块中（最初不打算作为CSS hack）并意识到它的作用后发送给browserhacks的代码，因此我提取了相关的部分用于我们的目的：
[注意： ]现在，下面的这种较旧的方法会在没有上述更新的情况下显示Safari 9和Microsoft Edge浏览器。即将发布的Firefox和Microsoft Edge版本在其编程中增加了对多个-webkit- CSS代码的支持，Edge和Safari 9均增加了对@supports功能检测的支持。 Chrome和Firefox之前已包含@supports。

/* Safari 6.1-7.0 */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{  
   .safari_only {(;

      color:#0000FF; 
      background-color:#CCCCCC; 

    );}
}

Chrome版本22-28（如果需要以支持较早的版本）的块也可以针对我上面发布的Safari组合hacks进行定位：这些可以按以下方式使用：

/* Safari 6.1-10.0 (not 10.1) (non-iOS) */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    _:-webkit-full-screen, .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

所以您不必在这篇文章中进行搜索，这是我的实时测试页：
https：//browserstrangeness.bitbucket。 io / css_hacks.html＃safari
[或镜像]
https://browserstrangeness.github.io/css_hacks.html#safari
测试页也有许多其他版本，特别是版本可以进一步
帮助您区分Chrome和Safari，以及许多针对Firefox，Microsoft Edge和Internet Explorer Web浏览器的黑客。
注意：如果某些内容对您不起作用，请检查测试请先进入页面，但请提供示例代码和您试图让任何人来帮助您的WHICH hack。

#2 楼

有一种方法可以从Chrome过滤Safari 5+：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .myClass {
     color:red;
    }

    /* Safari only override */
    ::i-block-chrome,.myClass {
     color:blue;
    }
}

#3 楼

仅Sarari

.yourClass:not(:root:root){ 
    /* ^_^ */ 
}

#4 楼

此hack 100％仅适用于Safari 5.1-6.0。我已经成功测试了它。

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
     ::i-block-chrome, .yourcssrule {
        your css property
    }
}

#5 楼

将类替换为（.myClass）

/ *仅限Safari * /
.myClass：not（：root：root）{
enter code here
}

#6 楼

对于那些想为Safari 7.0及更低版本（而非7.1及更高版本）实施hack的用户-使用：

.myclass { (;property: value;); }
.myclass { [;property: value;]; }

#7 楼

我喜欢使用以下方法：

var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) { 
  $('head').append('<link rel="stylesheet" type="text/css" href="path/to/safari.css">') 
};

#8 楼

顺便说一下，对于只需要在移动设备上定位Safari的任何人，只需向该黑客添加媒体查询即可：

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding: 10px; //or any property you need
    }
}

不要忘了将.safari_only类添加到要定位的元素，例如：

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari  </div>

#9 楼

使用仅用于Safari的过滤器时，我可以定位Safari（iOS和Mac），但不包括Chrome（和其他浏览器）：

@supports (-webkit-backdrop-filter: blur(1px)) {
  .safari-only {
    background-color: rgb(76,80,84);
  }
}

#10 楼

步骤1：使用https://modernizr.com/

步骤2：使用html类.regions仅选择Safari

a { color: blue; }
html.regions a { color: green; }

Modernizr将基于当前浏览器支持的内容将html类添加到DOM。 Safari支持http://caniuse.com/#feat=css-regions区域，而其他浏览器则不支持（无论如何）。在选择不同版本的IE时，此方法也非常有效。愿力量与你同在。

#11 楼

嗨，我做了这个，对我有用

@media(max-width: 1920px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 5.5% !important;
        }
    }
}

@media(max-width: 1680px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 15% !important;
        }

    }
}

@media(max-width: 1600px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 18% !important;
        }

    }
}


@media (max-width: 1440px) {
@media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 24.5% !important;
        }

    }

}


@media (max-width: 1024px) {
@media not all and (min-resolution:.001dpcm) {
    @media {
        .photo_row2 {
            margin-left: -11% !important;
        }

    }

}

#12 楼

这有效：

@media not all and (min-resolution:.001dpcm) { 
  @media {
    /* your code for Safari Desktop & Mobile */
    body {
      background-color: red;
      color: blue;
    }
    /* end */
  }
}

#13 楼

注意：如果仅iOS足够（如果您愿意牺牲Safari桌面），则可以使用：

    @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */ 
    }

#14 楼

您可以使用媒体查询黑客从其他浏览器中选择Safari 6.1-7.0。

#15 楼

最后，我使用了一些JavaScript来实现它： >

if (navigator.vendor.startsWith('Apple'))
    document.documentElement.classList.add('on-apple');

#16 楼

https://stackoverflow.com/a/17637937/3174065
尽管此方法确实使用了某些JS，但仍在此处回答。如果使用，请确保将js放在页脚中，主体必须完全加载才能正确触发，将其放置在头部时会出错，因为它在加载主体之前就触发了。然后将.safari类添加到主体，但仅在safari中，这使得对CSS的定位非常容易。

#17 楼

它在Safari中工作了100％。.i已尝试

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
::i-block-chrome, Class Name {your styles}
}

#18 楼

我已经测试过，并且对我有用。

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}