我正在尝试找到一种只应用于Safari的CSS方法，但我找到的所有方法都同时适用于Chrome。我知道这两个浏览器目前都是基于WebKit，但我在Chrome和Safari中遇到了div对齐的问题；它们显示不同。
我一直在尝试使用这个方法，但它也会影响Chrome：
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
有没有其他只适用于Safari的方法呢？
有没有一种方法只在Safari浏览器中应用样式？
282
- Bear John
6
不使用CSS，您需要使用JavaScript。https://dev59.com/SW025IYBdhLWcg3wnnYw - Christian
1我对实际问题比脆弱和不稳定的解决方案更感兴趣。它（仍然）可以在某个地方找到吗？ - Matijs
对于那些发布“不起作用”的人，请意识到您需要知道正在测试的Safari版本。并没有适用于每个版本的“万能”Safari解决方案。您需要在发布时提供该信息，否则没有人能帮助您找到解决方案。 - Jeff Clayton
不同版本的Safari有不同的需求 - 在此处检查实时示例：https://browserstrangeness.bitbucket.io/css_hacks.html#safari [或镜像] https://browserstrangeness.github.io/css_hacks.html#safari - Jeff Clayton
3注意：问题陈述中提到：“我知道Safari和Chrome都是Webkit浏览器”。但在2013年4月，也就是这个问题被提出之前，Google Chrome浏览器从WebKit转向了Blink，这是WebKit的一个分支。 - Rounin
由于Chrome现在使用Blink，而且自问题提出以来基本上一直在使用，因此将其关闭为不可重现。 - TylerH
23个回答
511
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
并且镜子！
https://browserstrangeness.github.io/css_hacks.html#safari
注意：过滤器和编译器（如SASS引擎）期望标准的“跨浏览器”代码，而不是像这样的CSS hack。这意味着它们将重写、破坏或删除这些hack，因为这不是hack的作用。其中很多都是非标准的代码，经过精心编写，只针对特定的浏览器版本，如果被修改，就无法正常工作。如果您希望在这些浏览器上使用它，您必须在任何过滤器或编译器之后加载您选择的CSS hack。这似乎是显而易见的，但是有很多人混淆了这一点，他们没有意识到通过这种软件运行它们会取消一个hack的效果，而这种软件并不是为此目的而设计的。 自从6.1版本以后，Safari已经发生了变化，许多人已经注意到了这一点。 请注意：如果您在iOS上使用Chrome（至少在iOS版本6.1及更高版本）（现在也包括Firefox），并且您想知道为什么没有任何黑客似乎能将Chrome与Safari分离开来，那是因为iOS版本的Chrome使用的是Safari引擎。它使用的是Safari的黑客，而不是Chrome的黑客。有关更多信息，请参阅此处：https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/。Firefox for iOS于2015年秋季发布。它也响应Safari的黑客，但不响应Firefox的黑客，与iOS Chrome相同。 另外：如果您尝试了一个或多个黑客，并且无法使它们正常工作，请发布示例代码（最好是测试页面）-您正在尝试的黑客，以及您使用的浏览器（确切版本！）和设备。没有这些额外的信息，我或其他人都无法为您提供帮助。 通常情况下，这只是一个简单的修复或者一个缺失的分号。对于CSS来说，通常是这样，或者是代码在样式表中的顺序问题，如果不是CSS错误的话。请在测试网站上测试这些技巧。如果在那里有效，那意味着这个技巧确实适用于您的设置，但还有其他问题需要解决。这里的人们真的很乐意帮助您，或者至少指引您正确的方向。 那么，下面是一些适用于较新版本Safari的技巧，您可以尝试使用： 首先，您应该尝试这个，因为它适用于当前的Safari版本，并且仅适用于Safari：This one still works properly with Safari 17.0 (Fall-2023):
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
/* Safari 10.1+ (alternate method) */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
/* 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 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 (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;
}
/* 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 (not 10.1) but not on iOS */
_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
@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+, < 13.1 */
@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 */
@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
/* 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 9.0-10.0 (not 10.1) (non-iOS) */
_:-webkit-full-screen:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
/* 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>
通常，人们询问Safari的黑客技巧的原因主要是为了将其与Google Chrome分开（再次强调，不是iOS！）可能有必要发布替代方案：如何单独针对Chrome而不是Safari进行定位，所以我在这里为您提供这个信息，以防需要。
以下是基本信息，再次请查看我的测试页面以获取Chrome的各个具体版本，但这些信息适用于Chrome的一般情况。Chrome的版本是45，Dev和Canary版本目前已更新到47。
我在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;
}
}
/* 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>
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
【或者镜子】 测试页面还有许多其他内容，特别是基于版本的内容，可以帮助您进一步区分Chrome和Safari，并且还有许多针对Firefox、Microsoft Edge和Internet Explorer浏览器的技巧。 注意：如果某些内容对您不起作用，请首先查看测试页面，然后提供示例代码和您尝试的技巧，以便其他人能够帮助您。- Jeff Clayton
51
16只想说测试页面太棒了。现在我可以使用任何设备浏览该网站，并查看适用的 CSS 规则！ - duyn9uyen
1这适用于iPhone或iPad上的Safari吗？ - Greg Rozmarynowycz
1这个回答开头针对 Safari 6.1+ 的 Hack 在 Sass 编译器中会报错。有没有解决的办法？ - Blackbird
2@Blackbird 抱歉，您不能编译或筛选这些黑客，这会破坏它们的作用。它们必须按原样使用。（在编译后将它们添加到已完成的 CSS 文件中。）它们非标准的事实是它们能够产生作用的原因。 - Jeff Clayton
1很棒的解决方案，我和@Blackbird一样遇到了SASS编译器的问题，但正如你所说，编译器可能会破坏空格等内容，因此我已经添加到最终输出中，并且完美地工作。 - Hayden Crocker
显示剩余46条评论
94
有一种方法可以从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;
}
}
- user2550776
5
3我一直在研究许多CSS Hack（我为browserhacks.com测试和创建CSS Hack），并在此处进行测试：http://browserstrangeness.bitbucket.org/css_hacks.html#webkit - Jeff Clayton
注意：在iOS中[已在iOS 7中测试]，Chrome版本实际上是运行Safari引擎的，因此在iPad或iPhone上，您需要使用Safari的hack。对于其他设备，情况则不同。 - Jeff Clayton
所以，基本上答案中的代码适用于Safari 5.0和6.0，而不适用于6.1+？ - Nic Cottrell
为了绝对准确，::i-block-chrome，.myClass {} 结构仅适用于 Safari 5.1-6.0，但也适用于 Chrome 10-24（旧版本的 Chrome 已不再使用，因此不值得提及），但不适用于任何更新版本 - Safari hack 的工作方式通常是这样的：一个批处理处理 5.1-6.0，另一个处理 6.1-7.0，新的则处理 7.1-8.0。它们似乎经常更新，直到决定转向接近前一个 '.1' 发布的下一个数值版本。 - Jeff Clayton
在2013年回答时，Safari 6.1刚刚发布，因此还没有足够多的人看到浏览器已经改变，所以这是当时最准确的答案。如果您需要更新的内容，请查看下面的答案。这是一个很好的答案，当它被提供时。时间会改变，所以我把我的工作作为对这个问题的更新发布了出来。我花了几个月的时间创建了6.1-7.0和7.1-8.0版本。我希望你喜欢结果。如果按照惯例发布版本8.1，那么很可能也需要不同的hack。同样，只有时间才能告诉我们。 - Jeff Clayton
21
仅限 Sarari
.yourClass:not(:root:root){
/* ^_^ */
}
- xicooc
9
11需要加一些解释吗？我是不是要字面上输入root：root？ - Nubtacular
1这个代码片段完全适用于Safari 3.x（以及Chrome版本1.0，尽管没有人使用Chrome 1.0，因为现在已经发布了30多个版本）。 - Jeff Clayton
4根据 CSS Selectors 3 规范，“:not(:root:root)”选择器无效。在这个规范中，":not()" 只能包含一个简单选择器，即一个类型选择器、一个ID、一个类或一个伪类。但是，在 CSS Selectors 4 中， ":not()" 接受选择器列表，所以完全有效。目前只有 Safari 可以理解 CSS Selectors 4 语法，但这个解决方案并不具备未来可扩展性。 - Ilya Streltsyn
2很少有黑客攻击是未来可靠的（由于版本更改，许多实际标准代码也不是）。最好的计划是，如果你要使用CSS hack，只将其用作临时修复措施，以赢得时间来进行更正式的跨浏览器更新。 - Jeff Clayton
1这也会影响Chrome。 - Aamir Afridi
显示剩余4条评论
15
适用于iOS 16和macOS Ventura：
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
.body {
background-color: red;
}
}
- Saber Hayati
1
1我真的很喜欢这个建议，因为它是自我记录的并且非常未来化。"Apple"字体现在很可能只在Safari中可用，并且在相当长的一段时间内都是如此。 - bdombro
14
这个黑客技巧只适用于Safari 5.1-6.0版本，我刚刚测试成功了。
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .yourcssrule {
your css property
}
}
- Veka0881
2
3这个黑客方法适用于不同版本的Chrome和Safari浏览器。它只适用于Chrome 10-24（目前已经没人使用，因此人们列出了它可以阻止Chrome）和Safari 5.1-6.0。但是，它不能在Safari 6.1及更高版本中使用。当时，这是同类黑客方法中最好的。 - Jeff Clayton
大家请注意。这些评论所描述的方法在过去几年的Safari版本中不起作用，只适用于旧版本。这实际上意味着，大多数互联网用户将无法获得您要寻找的结果，只有使用旧电脑的人才能够。这对于当前操作系统无效。目前，大多数人使用的是12及以上版本（而不是6.0及以下版本，这些版本仅在Windows XP时代流行）。 - Jeff Clayton
9
@supports (-webkit-backdrop-filter: blur(1px)) {
.safari-only {
background-color: rgb(76,80,84);
}
}
- iguido
4
这不会过滤Edge。 - Steve
1从这个页面的所有黑客中，这是唯一一个对我有用的。它可以在2022年的Mac上过滤Firefox、Chrom、Opera和Edge。 - Bachir Messaouri
1在这个页面的所有黑客中，这是唯一一个对我有效的。它在2022年过滤了Mac上的Firefox、Chrome、Opera和Edge浏览器。 - Bachir Messaouri
已确认在2023年4月，我的MacBook上的Apple Safari与我Linux PC上的Chrome可以进行过滤。希望我不需要关心任何其他边缘情况。 - Ingo Steinke
7
对于那些想要在Safari 7.0及以下版本实施黑客攻击，而不是7.1及以上版本的人，请使用：
.myclass { (;property: value;); }
.myclass { [;property: value;]; }
- Stifboy
5
我在Safari 7上尝试了一下，但无法使其工作。你能提供一个可行的例子吗？ - Juicy
@Juicy：这些内容可以在browserhacks.com进行在线测试——它们适用于Safari 7及以下版本，以及Chrome 28和更早的版本。（正如另一篇帖子中所提到的，iOS 7和8可能还有其他版本也将Safari引擎用于Chrome，因此iPad上的Chrome和Safari实际上都是Safari）。 - Jeff Clayton
您可能是在Safari 7.1中尝试，而不是Safari 7.0。它适用于7.0及更早版本，而不适用于7.1及更新版本。当此答案发布时，7.0是Safari的最新版本，因此在那个时候是正确的。 - Jeff Clayton
适用于 Safari for Windows（版本5.1.7（7534.57.2））。 - jave.web
适用于Safari for Mac（版本6.0.2（7536.26.17））。 - Merlin
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">')
};
- Brandon Webster
2
1这种 JavaScript 黑科技方法需要安装 JQuery 包。 - Jeff Clayton
这被认为是极其糟糕的做法，浏览器嗅探非常容易出错，并导致大量误报。不要这样做，即使媒体查询嗅探也很不干净，但对于非常小的更改可能是可以接受的。 - Wannes
6
替换 (.myClass) 中的类
/* 仅适用于 Safari */
.myClass:not(:root:root) {
输入代码
}
- Trinesh G D
4
这对Safari来说是个好消息——它只针对Chrome 1（现在已经没人用了）以外的浏览器。 - Jeff Clayton
不使用最新的 Mac 电脑的用户需要遵循以下确切规格：Chrome 1，Safari 3.X，Safari 9.0+（不包括 Safari 4-8）。 - Jeff Clayton
1这适用于最新版本的Safari 7+，据我所知应该是可接受的答案。 - Jason Engage
这个不再起作用了。 - maxshuty
4
https://www.bram.us/2021/06/23/css-at-supports-rules-to-target-only-firefox-safari-chromium/#safari
@supports (background: -webkit-named-image(i)) {
//
}
h1::after {
content: "No";
margin-left: .3em;
color: red;
}
@supports (background: -webkit-named-image(i)) {
h1::after {
content: "Yes";
color: green;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Safari?</h1>
</body>
</html>- JBeen
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，