是否有针对safari而非chrome的css攻击？

我试图为safari而不是chrome找到一个css黑客，我知道这两个浏览器都是webkit浏览器，但我在chrome和safari中的div对齐方面有问题，每个浏览器的显示方式都不同

我一直在尝试使用它，但它也会影响chrome

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

---

有人知道另一个只适用于safari的吗？

有一种方法可以从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;
    }
}

只有萨拉里

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

---

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

• 为CATALINA&SAFARI 13更新（2020年初更新）*

请--如果您遇到问题，并且确实希望获得帮助或通过发布评论帮助他人，请发布您的浏览器和设备（MacBook/IPad/etc…带有浏览器和操作系统版本号！）

声称所有这些工作都不准确（事实上甚至不可能）。其中许多不是真正的“黑客”，而是苹果在Safari版本中内置的代码。需要更多的信息。我喜欢你来这里的事实，我真的希望事情能为你解决

如果您在网站上遇到问题，请务必通过下面的链接检查测试网站——如果有黑客在那里工作，但不是在您的网站上，那么黑客不是问题所在——您的网站还发生了其他问题，通常只是下面提到的CSS冲突，或者可能什么都不起作用，但您可能不知道您实际上根本没有使用Safari。请记住，这里的信息是为了帮助（希望）有短期问题的人

试验地点：

还有镜子

注意：过滤器和编译器（如SASS引擎）需要标准的“跨浏览器”代码，而不是像这样的CSS黑客，这意味着他们将重写、销毁或删除黑客，因为这不是黑客所做的。这些代码大多是非标准代码，经过精心编制，只针对单一浏览器版本，如果更改，则无法工作。如果您希望将其与这些工具一起使用，您必须在任何过滤器或编译器之后加载您选择的CSS hack。这似乎是一个既定的事实，但人们一直很困惑，他们没有意识到，他们正在通过这种并非为此目的而设计的软件来运行黑客，这是在破坏黑客行为

许多人都注意到，Safari自6.1版以来发生了变化。

请注意：如果您在iOS（至少在iOS版本6.1和更新版本中）上使用Chrome[以及现在的Firefox]，并且您想知道为什么没有黑客将Chrome与Safari分开，这是因为iOS版本的Chrome使用的是Safari引擎。它使用Safari黑客而不是Chrome黑客。更多信息请参见：Firefox for iOS于2015年秋季发布。它也对Safari的黑客攻击做出了回应，但Firefox的黑客攻击与iOS Chrome的攻击都不一样

另外：如果您尝试了一个或多个黑客程序，但无法使其正常工作，请发布示例代码（最好是测试页面）-您正在尝试的黑客程序，以及您正在使用的浏览器（确切版本！），以及您正在使用的设备。没有这些额外的信息，我或这里的任何人都无法帮助您。

通常是一个简单的修复或缺少分号。在CSS中，如果不仅仅是CSS错误，代码在样式表中的顺序通常是这样或那样的问题。请在测试站点测试黑客。如果它在那里工作，这意味着黑客真的是为您的设置工作，但它是其他一些需要解决的问题。这里的人真的很乐意帮助你，或者至少为你指明了正确的方向。

这里有一些黑客可以用于Safari的最新版本

您应该首先尝试此版本，因为它涵盖了当前的Safari版本，并且仅适用于纯Safari：

这一款仍然适用于Safari 13（2020年初）：

为了涵盖更多版本，6.1和更高版本，此时您必须使用下一对css黑客。适用于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月底更新）

这个黑客是我在几个月的测试和实验中结合其他多种黑客创建的

注：如上所述，双媒体查询并非偶然——它排除了许多无法处理媒体查询嵌套的旧浏览器其中一个“and”之后缺少的空格也很重要。这毕竟是一个黑客。。。也是目前唯一一款适用于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; 

    }
}}

有关更多“特定版本”的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.0（非iOS设备）：

Safari 9 CSS黑客：

Safari 9.0及更高版本的一个简单支持功能查询黑客：

@supports (-webkit-hyphens:none)
{

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

}

_: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及更高版本的简单下划线攻击：

@supports (-webkit-hyphens:none)
{

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

}

_: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及更高版本：

@supports (-webkit-hyphens:none)
{

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

}

_: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+ */

@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

/* 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+但不用于iO

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

    );}
}

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

/* Chrome 29+ */

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

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

    }
}

/* 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+, Now Also Safari 9+, Firefox, and Microsoft Edge */

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

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

    }
}

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

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

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

@media \\0 screen {}

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

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

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

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

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

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

    }

}

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

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

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

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

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

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