有没有一个CSS的黑客Safari浏览器只有不铬？
即时通讯试图find一个只是Safari浏览器的CSS黑客不铬，我知道这些都是WebKit浏览器，但即时通讯与铬和Safari浏览器的divalignment问题，每个显示不同。
我一直在试图使用这个，但它也影响铬，
@media screen and (-webkit-min-device-pixel-ratio:0) { #safari { display: block; } } 有没有人知道另一个将只适用于safari？
- SAFARI 11更新（2017年秋季更新）*
注意：filter和编译器（比如SASS引擎）需要标准的“跨浏览器”代码 – 不要CSS这样的黑客 ，这意味着他们将重写，销毁或删除黑客，因为这不是什么黑客行为。 这是非标准的代码，精心制作的目标是单一的浏览器版本，如果他们改变不能工作。 如果你想使用它， 你必须加载你select的CSS黑客之后的任何filter或编译器 。 这可能看起来像一个给定的，但人们之间有很多混淆，没有意识到他们正在通过这样的软件来解决黑客攻击，而这种软件并不是为此目的而devise的。
正如许多人已经注意到的那样，Safari从6.1版本开始改变
请注意：如果您在iOS上使用Chrome（现在也是Firefox）（至less在iOS版本6.1和更高版本中），并且您想知道为什么没有任何黑客将Chrome与Safari分开，这是因为iOS版本的Chrome正在使用Safari引擎。 它使用Safari黑客而不是Chrome浏览器。 更多关于这里： https : //allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/
此外，如果您尝试了一个或多个黑客攻击，并且无法让他们工作，请张贴示例代码（更好的是testing页） – 您尝试的黑客行为，以及您的浏览器（确切版本）正在使用以及您正在使用的设备。 没有这些额外的信息，我或其他任何人都不可能帮助你。
通常这是一个简单的修复或缺less分号。 在CSS中，通常是代码在样式表中列出的顺序或问题，如果不是CSS错误。 请在testing网站上testing这些黑客。 如果它在那里工作，这意味着黑客确实在为你的设置工作，但这是别的东西需要解决。 这里的人真的很乐意帮忙，或者至less让你指向正确的方向。
testing网站：
https://browserstrangeness.bitbucket.io/css_hacks.html#webkit
和镜子！
https://browserstrangeness.github.io/css_hacks.html#webkit
Firefox for iOS是在2015年秋季发布的，它也响应Safari Hacks，但没有一个与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的黑客。 一个6.1-10.0与一个处理10.1和以上。
那么，这里是我为Safari 10.1+所做的一个工作：
双重媒体查询在这里很重要，不要删除它。
/* Safari 10.1+ (which is the latest version of Safari at this time) */ @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月下旬更新）
这个黑客我通过结合多个其他黑客创build了多个月的testing和实验。
注意：如上所述，双重媒体查询不是偶然 – 它排除了许多无法处理媒体查询嵌套的旧浏览器。 – 其中之一的缺失空间也很重要。 毕竟，这是一个黑客…而且是唯一一个适用于6.1和所有更新的Safari版本。 另外请注意，在下面的评论中列出，黑客是非标准的CSS，必须在filter后应用。 诸如SASS引擎之类的filter将彻底重写/撤消或彻底删除它。
如上所述，请检查我的testing页面，看它是否按原样工作（无需修改！）
这里是代码：
/* Safari 6.1-10.0 (not 10.1, which is the latest version of Safari at this time) */ @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; } }}
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; }
和一个支持function查询：
/* 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现在包括function检测，所以我们现在可以使用它…
/* 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浏览器黑客的问题主要是关于如何将其与谷歌浏览器（又不是iOS）分开的原因。发布替代scheme可能很重要：如何将Chrome与Safari分开定位，所以如果需要，我会在这里为您提供。
这里是基本知识，再次检查我的testing页面的许多特定版本的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; } }
一个@supportsfunction查询适用于Chrome 29以及…我们用于下面的Chrome 28 +的修改版本。 Safari 9，即将到来的Firefox浏览器，以及Microsoft Edge浏览器都没有select这个：
/* 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都增加了对支持function检测的支持。 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>
所以你不必在这个post中search它，这里是我的实时testing页面：
https://browserstrangeness.bitbucket.io/css_hacks.html#webkit
[或者镜子]
https://browserstrangeness.github.io/css_hacks.html#webkit
testing页面还有许多其他function，特别是基于版本的function，以进一步帮助您区分Chrome和Safari，以及Firefox，Microsoft Edge和Internet Explorernetworking浏览器的许多黑客行为。
注意：如果某些东西不适合你，请先检查testing页面，但是提供示例代码，以及你正在尝试帮助你的任何人。
有一种方法可以从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; } }
仅限Sarari
.yourClass:not(:root:root){ /* ^_^ */ }
这黑客100％的工作只为狩猎。 我刚刚testing成功。
@media only screen and (-webkit-min-device-pixel-ratio: 1) { ::i-block-chrome, .yourcssrule { your css property } }
对于那些想要实现Safari 6和7的黑客，请使用：
.myclass { (;property: value;); } .myclass { [;property: value;]; }
顺便说一下，对于只需要在手机上定位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>
您可以使用媒体查询hack从其他浏览器中selectSafari 7+。
@media \\0 screen {}
免责声明：这个黑客也针对旧的Chrome版本（2013年7月之前）。
第1步：使用https://modernizr.com/
第2步：使用html类.regions仅selectSafari
a { color: blue; } html.regions a { color: green; }
Modernizr将根据当前浏览器支持的内容向DOM添加html类。 Safari支持地区http://caniuse.com/#feat=css-regions而其他浏览器不（至less）。; 这种方法在select不同版本的IE时也非常有效。 愿原力与你同在。
用（.myClass）replace你的类
/ *仅限Safari * / .myClass：not（：root：root）{ enter code here }
我喜欢用下面的方法：
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">') };
它在safari工作100％..我试过
@media screen and (-webkit-min-device-pixel-ratio:0) { ::i-block-chrome, Class Name {your styles} }
