Question

我试图找到一个仅用于野生动物园而不是Chrome的css hack，我知道这些都是webkit浏览器，但我在chrome和safari中遇到div对齐问题，每个都显示不同。

我一直试图使用它，但它也会影响铬，

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

有人知道另一个只适用于野生动物园吗？

Answer 1

SAFARI 11更新（2017年秋季更新）*

注意：过滤器和编译器（例如SASS引擎）需要标准的跨浏览器＆＃39;代码 - 不是这些 的CSS黑客，这意味着他们会重写，销毁或删除黑客，因为这不是黑客所做的。这是非标准代码，经过精心设计，仅针对单个浏览器版本，如果更改则无法工作。如果您希望将它与 一起使用，则必须在任何过滤器或编译器 之后加载您选择的CSS hack。这可能看起来像是一个给定的但是人们之间存在很多混淆，他们没有意识到他们正在通过不是为此目的而设计的软件来破解黑客攻击。

自6.1版以来，Safari已发生变化，正如许多人所注意到的那样。

请注意：如果你在iOS上使用Chrome [现在也使用Firefox]（至少在iOS版本6.1及更新版本中），你想知道为什么没有任何黑客似乎将Chrome与Safari分开，这是因为iOS版Chrome正在使用Safari引擎。它使用Safari hacks而不是Chrome。有关详情，请访问：https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/

另外：如果你已经尝试了一个或多个黑客并且无法让它们工作，请发布示例代码（更好的是测试页） - 你正在尝试的黑客，以及什么浏览器（s）（确切版本！）您正在使用的设备以及您正在使用的设备。如果没有这些额外信息，我或其他任何人都无法为您提供帮助。

通常它是一个简单的修复或缺少分号。使用CSS通常是样式表中列出代码的顺序或问题，如果不是CSS错误。请在测试网站上测试黑客攻击。如果它在那里工作，这意味着黑客确实适用于您的设置，但它是需要解决的其他东西。这里的人真的很乐意帮助，或者至少指出你正确的方向。

测试地点：

https://browserstrangeness.bitbucket.io/css_hacks.html#webkit

AND MIRROR！

https://browserstrangeness.github.io/css_hacks.html#webkit

Firefox for iOS于2015年秋季发布，它也响应了Safari Hacks，但没有一款是Firefox，与iOS Chrome相同。

这里的方法很糟糕，你可以使用更新版本的Safari。

你应该首先尝试这个，因为它涵盖了当前的Safari版本，并且只是纯Safari：

这个仍适用于Safari 10.1：

/* Safari 7.1+ */

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

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

}

要涵盖更多版本，6.1及更高版本，此时你必须使用下一对css hacks。 6.1-10.0用于处理10.1及以上版本的那个。

那么 - 这是我为Safari 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月下旬更新）

这个hack我通过结合多个其他黑客来创建了数月的测试和实验。

注意：如上所述，双媒体查询不是偶然的 - 它排除了许多无法处理媒体查询嵌套的旧浏览器。 - 其中一个＆＃39;之后缺少的空间也很重要。毕竟，这是一个黑客......而且是唯一适用于6.1和所有新版Safari的版本。另请注意，如下面的评论所列，黑客是非标准的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; 

    }
}}

有关更多特定版本的＆＃39; 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; 

    }
}}

稍微修改适用于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之一：

/* Safari 10.0 (not 10.1) */

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

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

}

Safari 10.0（非iOS设备）：

/* 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 CSS Hacks：

Safari 9.0及以上版本之一：

/* Safari 9+ */

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

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

}

以及支持功能查询：

/* Safari 9+ */

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

    .safari_only { 

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

    }
}

Safari 9.0-10.0之一：

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

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

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

}

Safari 9现在包含功能检测，因此我们现在就可以使用它了......

/* Safari 9 */

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

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

}

现在仅针对iOS设备。如上所述，由于iOS上的Chrome植根于Safari，它当然也会触及它。

/* 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.0+，但不适用于iOS设备：

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

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

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

}

其中一个适用于Safari 9.0-10.0但不适用于iOS设备：

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

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

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

}

以下是分离6.1-7.0和7.1+的黑客攻击这些还需要多个黑客的组合才能获得正确的结果：

/* 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; 

    );}
}

由于我已指出阻止iOS设备的方法，以下是针对非iOS设备的Safari 6.1+ hack的修改版本：

/* 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; 

    }
}}

使用它们：

<div class="safari_only">This text will be Blue in Safari</div>

通常[喜欢这个问题]人们询问Safari黑客的原因是主要是指将其与谷歌Chrome分开（再次不是iOS！）发布替代方案可能很重要：如何单独定位Chrome 来自Safari，所以我在这里为你提供这个，以备不时之需。

以下是基础知识，再次查看我的测试页面，了解Chrome的许多特定版本，但这些内容涵盖了Chrome。 Chrome版本为45，Dev和Canary版本目前版本为47版。

我在浏览器上放置的旧媒体查询组合仍适用于Chrome 29 +：

/* Chrome 29+ */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
    .chrome_only {

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

    }
}

@supports功能查询适用于Chrome 29+以及...我们用于Chrome 28+以下版本的修改版本。 Safari 9，即将推出的Firefox浏览器和Microsoft Edge浏览器都没有使用这个浏览器：

/* Chrome 29+ */

@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
    .chrome_only {

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

    }
}

以前，Chrome 28和更新版本很容易定位。这是我发给浏览器的一个看到它包含在其他CSS代码块中（原本不打算作为CSS黑客）并实现它的功能，所以我为了我们的目的提取了相关部分：

[注意：]现在，下面这个较旧的方法会在没有上述更新的情况下对Safari 9和Microsoft Edge浏览器进行操作。即将推出的Firefox和Microsoft Edge版本在其编程中增加了对多个-webkit-CSS代码的支持，Edge和Safari 9都增加了对@supports特征检测的支持。 Chrome和Firefox之前包括@supports。

/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */

@supports (-webkit-appearance:none) 
{
    .chrome_and_safari {

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

    }
}

Chrome版本22-28块（如果需要支持旧版本）也可以在我上面发布的我的Safari组合黑客上进行扭曲：

/* Chrome 22-28 */

@media screen and(-webkit-min-device-pixel-ratio:0)
{
    .chrome_only {-chrome-:only(;

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

    );}
}

NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;

与上面的Safari CSS格式化黑客一样，可以按如下方式使用：

<div class="chrome_only">This text will be Blue in Chrome</div>

所以你不必在这篇文章中搜索它，这是我的实时测试页面：

https://browserstrangeness.bitbucket.io/css_hacks.html#webkit

[或镜子]

https://browserstrangeness.github.io/css_hacks.html#webkit

测试页面还有许多其他内容，特别是基于版本的内容帮助您区分Chrome和Safari，以及Firefox，Microsoft Edge和Internet Explorer Web浏览器的许多黑客。

注意：如果某些内容对您不起作用，请首先检查测试页，但提供示例代码以及您试图让任何人为您提供帮助的黑客攻击。

Answer 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;
    }
}

Answer 3

仅限Sarari

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

Answer 4

这个黑客100％仅适用于野生动物园。我刚刚成功测试了它。

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

Answer 5

对于那些想要为Safari 7.0及更低版本而不是7.1及以上版本实施黑客攻击的用户，请使用：

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

Answer 6

我喜欢使用以下方法：

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">') 
};

Answer 7

在（.myClass）

中替换您的班级

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

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

Answer 9

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

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

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

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

Answer 10

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

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

Answer 11

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

@media \\0 screen {}

免责声明：此黑客还针对旧的Chrome版本（2013年7月之前）。

Answer 12

你做了这个，它对我有用

@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;
        }

    }

}

Answer 13

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

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

Answer 14

它在safari中工作100％..我试过

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

Answer 15

这有效：

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

Answer 16

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

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

Answer 17

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

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

然后在我的CSS中以Apple浏览器引擎为目标，选择器将为：

.on-apple .my-class{
    ...
}

Answer 18

https://stackoverflow.com/a/17637937/3174065 尽管此方法确实使用了某些JS，但仍在此处回答。如果使用的话，请确保将js放在页脚中，主体必须完全加载才能正常启动，将其放置在头部时会出错，因为它在加载主体之前就启动了。

然后将.safari类添加到主体，但仅在safari中，这使得对CSS的定位非常容易。

是否有一个css黑客的野生动物园只有不铬？

18 个答案: