是否有仅适用于 safari 而不是 chrome 的 css hack？

Question

提问by Bear John

im trying to find a css hack for just safari NOT chrome, i know these are both webkit browsers but im having problems with div alignments in chrome and safari, each displays differently.

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

i have been trying to use this but it affects chrome as well,

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

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

does anyone know of another one that will just apply to safari please?

有谁知道另一种只适用于 safari 的吗？

Answer 1

回答by Jeff Clayton

UPDATED FOR CATALINA & SAFARI 13 (early 2020 Update) *

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

NOTE: Filters and compilers (such as the SASS engine) expect standard 'cross-browser' code -- NOT CSS hacks like thesewhich means they will rewrite, destroy or remove the hacks since that is not what hacks do. Much of this is non-standard code that has been painstakingly crafted to target single browser versions only and cannot work if they are altered. If you wish to use it with those, you must load your chosen CSS hack AFTER any filter or compiler. This may seem like a given but there has been a lot of confusion among people who do not realize that they are undoing a hack by running it through such software which was not designed for this purpose.

注意：过滤器和编译器（例如 SASS 引擎）需要标准的“跨浏览器”代码——而不是像这样的 CSS hack，这意味着它们将重写、破坏或删除 hack，因为这不是 hack 所做的。其中大部分是非标准代码，经过精心设计，仅针对单个浏览器版本，如果更改则无法运行。如果你想和那些一起使用它，你必须在任何过滤器或编译器之后加载你选择的 CSS hack。这似乎是理所当然的，但在那些没有意识到他们正在通过运行并非为此目的而设计的此类软件来撤消黑客攻击的人们之间存在很多困惑。

Safari has changed since version 6.1, as many have noticed.

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

Please note: if you are using Chrome [and now also Firefox] on iOS (at least in iOS versions 6.1 and newer) and you wonder why none of the hacks seem to be separating Chrome from Safari, it is because the iOS version of Chrome is using the Safari engine. It uses Safari hacks not the Chrome ones. More about that here: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/Firefox for iOS was released in Fall 2015. It also responds to the Safari Hacks, but none of the Firefox ones, same as iOS Chrome.

请注意：如果您在 iOS 上使用 Chrome [现在还有 Firefox]（至少在 iOS 6.1 和更新版本中）并且您想知道为什么没有任何黑客似乎将 Chrome 与 Safari 分开，那是因为 Chrome 的 iOS 版本正在使用 Safari 引擎。它使用 Safari 黑客而不是 Chrome 黑客。有关更多信息，请访问：https: //allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plate-apple/Firefox for iOS 于 2015 年秋季发布。它还响应了Safari Hacks，但不是 Firefox Hacks，与 iOS Chrome 相同。

ALSO: If you have tried one or more of the hacks and have trouble getting them to work, please post sample code (better yet a test page) - the hack you are attempting, and what browser(s) (exact version!) you are using as well as the device you are using. Without that additional information, it is impossible for me or anyone else here to assist you.

另外：如果您尝试过一种或多种黑客攻击并且无法使它们起作用，请发布示例代码（最好是测试页面）-您正在尝试的黑客攻击，以及您使用的浏览器（确切版本！）正在使用以及您正在使用的设备。如果没有这些额外的信息，我或这里的其他任何人都无法为您提供帮助。

Often it is a simple fix or a missing semicolon. With CSS it is usually that or a problem of which order the code is listed in the style sheets, if not just CSS errors. Please do test the hacks here on the test site. If it works there, that means the hack really is working for your setup, but it is something else that needs to be resolved. People here really do love to help, or at least point you in the right direction.

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

The test site:

测试地点：

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

AND MIRROR!

和镜子！

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

That out of the way here are hacks for you to use for more recent versions of Safari.

这里有一些技巧供您用于更新版本的 Safari。

You should try this one first as it covers current Safari versions and is pure-Safari only:

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

This one still works properly with Safari 13 (early-2020):

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

/* Safari 7.1+ */

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

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

}

To cover more versions, 6.1 and up, at this time you have to use the next pair of css hacks. The one for 6.1-10.0 to go with one that handles 10.1 and up.

要涵盖更多版本，6.1 及更高版本，此时您必须使用下一对 css hack。6.1-10.0 与处理 10.1 及更高版本的一种。

So then -- here is one I worked out for Safari 10.1+:

那么 - 这是我为 Safari 10.1+ 制定的一个：

The double media query is important here, don't remove it.

双媒体查询在这里很重要，不要删除它。

/* Safari 10.1+ */

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

    .safari_only { 

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

    }
}}

Try this one if SCSS or other tool set has trouble with the nested media query:

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

/* Safari 10.1+ (alternate method) */

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

    .safari_only { 

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

    }
}}

This next one works for 6.1-10.0 but not 10.1 (Late March 2017 update)

下一个适用于 6.1-10.0 但不适用于 10.1（2017 年 3 月下旬更新）

This hack I created over many months of testing and experimentation by combining multiple other hacks.

我通过结合多个其他 hack 进行了数月的测试和实验，创建了这个 hack。

NOTES: like above, the double media query is NOT an accident -- it rules out many older browsers that cannot handle media query nesting. -- The missing space after one of the 'and's is important as well. This is after all, a hack... and the only one that works for 6.1 and all newer Safari versions at this time. Also be aware as listed in the comments below, the hack is non-standard css and must be applied AFTER a filter. Filters such as SASS engines will rewrite/undo or completely remove it outright.

注意：像上面一样，双重媒体查询不是偶然的——它排除了许多无法处理媒体查询嵌套的旧浏览器。-- 'and' 后面的空格也很重要。毕竟，这是一种 hack ……并且是目前唯一适用于 6.1 和所有更新的 Safari 版本的方法。另请注意，如下面的评论中所列，hack 是非标准 css，必须在过滤器之后应用。诸如 SASS 引擎之类的过滤器将重写/撤消或完全删除它。

As mentioned above, please check my test page to see it working as-is (without modification!)

如上所述，请检查我的测试页面以查看它按原样运行（无需修改！）

And here is the code:

这是代码：

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

    }
}}

For more 'version specific' Safari CSS, please continue to read below.

有关更多“特定于版本”的 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; 

    }
}}

One for Safari 11.0:

Safari 11.0 之一：

/* Safari 11.0 (not 11.1) */

html >> * .safari_only {

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

}

One for Safari 10.0:

Safari 10.0 之一：

/* Safari 10.0 (not 10.1) */

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

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

}

Slightly modified works for 10.1 (only):

对 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 (Non-iOS Devices):

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 CSS 黑客：

A simple supports feature query hack for Safari 9.0 and up:

Safari 9.0 及更高版本的简单支持功能查询技巧：

@supports (-webkit-hyphens:none)
{

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

}

A simple underscore hack for Safari 9.0 and up:

Safari 9.0 及更高版本的简单下划线黑客：

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

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

}

Another one for Safari 9.0 and up:

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

/* Safari 9+ */

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

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

}

and another support features query too:

另一个支持功能也查询：

/* Safari 9+ */

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

    .safari_only { 

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

    }
}

One for Safari 9.0-10.0:

一种适用于 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 now includes feature detection so we can use that now...

Safari 9 现在包括功能检测，所以我们现在可以使用它...

/* Safari 9 */

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

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

}

Now to target iOS devices only. As mentioned above, since Chrome on iOS is rooted in Safari, it of course hits that one as well.

现在仅针对 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; 
  }

}

one for Safari 9.0+ but not iOS devices:

一种适用于 Safari 9.0+ 但不适用于 iOS 设备：

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

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

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

}

And one for Safari 9.0-10.0 but not iOS devices:

一个适用于 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; 

}

Below are hacks that separate 6.1-7.0, and 7.1+ These also required a combination of multiple hacks in order to get the right result:

以下是将 6.1-7.0 和 7.1+ 分开的 hack，这些还需要多个 hack 的组合才能获得正确的结果：

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

    );}
}

Since I have pointed out the way to block iOS devices, here is the modified version of Safari 6.1+ hack that targets non-iOS devices:

由于我已经指出了阻止 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; 

    }
}}

To use them:

要使用它们：

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

Usually [like in this question] the reason people ask about Safari hacks is mostly in reference to separating it from Google Chrome (again NOT iOS!) It may be important to post the alternative: how to target Chrome separately from Safari as well, so I am providing that for you here in case it is needed.

通常[就像在这个问题中]人们询问 Safari 黑客的原因主要是为了将它与 Google Chrome 分开（再次不是 iOS！）发布替代方案可能很重要：如何将 Chrome 与 Safari 分开，所以我在这里为您提供，以防万一。

Here are the basics, again check my test page for lots of specific versions of Chrome, but these cover Chrome in general. Chrome is version 45, Dev and Canary versions are up to version 47 at this time.

这是基础知识，再次检查我的测试页面以获取许多特定版本的 Chrome，但这些涵盖了一般的 Chrome。Chrome 是 45 版本，Dev 和 Canary 版本目前最高版本是 47。

My old media query combo I put on browserhacks still works just for Chrome 29+:

我在 browserhacks 上使用的旧媒体查询组合仍然仅适用于 Chrome 29+：

/* Chrome 29+ */

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

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

    }
}

An @supports feature query works well for Chrome 29+ as well... a modified version of the one we were using for Chrome 28+ below. Safari 9, the coming Firefox browsers, and the Microsoft Edge browser are not picked up with this one:

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

    }
}

Previously, Chrome 28 and newer were easy to target. This is one I sent to browserhacks after seeing it included within a block of other CSS code (not originally intended as a CSS hack) and realized what it does, so I extracted the relevant portion for our purposes:

以前，Chrome 28 及更新版本很容易被定位。这是我在看到它包含在其他 CSS 代码块中（最初不是用作 CSS hack）并意识到它的作用后发送给 browserhacks 的，因此我提取了相关部分用于我们的目的：

[ NOTE: ] This older method below now pics up Safari 9 and the Microsoft Edge browser without the above update. The coming versions of Firefox and Microsoft Edge have added support for multiple -webkit- CSS codes in their programming, and both Edge and Safari 9 have added support for @supports feature detection. Chrome and Firefox included @supports previously.

[ 注意： ] 下面这个较旧的方法现在可以在没有上述更新的情况下拍摄 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; 

    }
}

The block of Chrome versions 22-28 (If needed to support older versions) are also possible to target with a twist on my Safari combo hacks I posted above:

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

Like the Safari CSS formatting hacks above, these can be used as follows:

与上面的 Safari CSS 格式化技巧一样，这些可以按如下方式使用：

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

So you don't have to search for it in this post, here is my live test page again:

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

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

[Or the Mirror]

[或镜子]

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

The test page has many others as well, specifically version-based to further help you differentiate between Chrome and Safari, and also many hacks for Firefox, Microsoft Edge, and Internet Explorer web browsers.

测试页面还有许多其他页面，特别是基于版本的，以进一步帮助您区分 Chrome 和 Safari，以及针对 Firefox、Microsoft Edge 和 Internet Explorer Web 浏览器的许多技巧。

NOTE: If something doesn't work for you, check the test page first, but provide example code and WHICH hack you are attempting for anyone to assist you.

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

Answer 2

回答by user2550776

There is a way to filter Safari 5+ from Chrome:

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

回答by xicooc

Sarari Only

仅萨拉里

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

Answer 4

回答by Veka0881

This hack 100% work only for safari 5.1-6.0. I've just tested it with success.

此 hack 100% 仅适用于 safari 5.1-6.0。我刚刚测试成功。

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

Answer 5

回答by Stifboy

For those who want to implement a hack for Safari 7.0 and below, but not 7.1 and above -- use:

对于那些想要为 Safari 7.0 及更低版本而不是 7.1 及更高版本实施 hack 的人 - 使用：

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

Answer 6

回答by Trinesh G D

Replace your class in (.myClass)

在 (.myClass) 中替换您的课程

/* Safari only */ .myClass:not(:root:root) { enter code here}

/* 仅 Safari */ .myClass:not(:root:root) { enter code here}

Answer 7

回答by Juanma Menendez

By the way, for any of you guys that just need to target Safari on mobiles, just add a media query to this hack:

顺便说一句，对于任何只需要在移动设备上定位 Safari 的人，只需在这个 hack 中添加一个媒体查询：

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

And don't forget to add the .safari_onlyclass to the element you want to target, example:

并且不要忘记将.safari_only类添加到您要定位的元素中，例如：

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

Answer 8

回答by Brandon Webster

I like to use the following method:

我喜欢使用以下方法：

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 9

回答by iguido

When using this safari-only filter I could target Safari (iOS and Mac), but exclude Chrome (and other browsers):

使用这个仅限 safari 的过滤器时，我可以针对 Safari（iOS 和 Mac），但排除 Chrome（和其他浏览器）：

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

Answer 10

回答by ChiiiN

hi i ve made this and it worked for me

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

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

    }

}

是否有仅适用于 safari 而不是 chrome 的 css hack？

提问by Bear John

回答by Jeff Clayton

回答by user2550776

回答by xicooc

回答by Veka0881

回答by Stifboy

回答by Trinesh G D

回答by Juanma Menendez

回答by Brandon Webster

回答by iguido

回答by ChiiiN

相关推荐

最近更新

标签

是否有仅适用于 safari 而不是 chrome 的 css hack？

提问by Bear John

回答by Jeff Clayton

回答by user2550776

回答by xicooc

回答by Veka0881

回答by Stifboy

回答by Trinesh G D

回答by Juanma Menendez

回答by Brandon Webster

回答by iguido

回答by ChiiiN

相关推荐

CSS 如何让文本出现在下一行而不是溢出？

如何在 CSS 中删除 ul 中的特定项目符号？

即使放大/缩小，CSS 主体背景图像也固定为全屏

用 CSS 淡出边框

相关推荐

最近更新

标签