我试图找到一种方法来应用CSS只是Safari，但我发现一切也适用于Chrome。我知道这些目前都是WebKit浏览器，但我有问题的div对齐在Chrome和Safari;它们的显示方式不同。
我一直在尝试使用这个，但它也会影响Chrome:
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
有人知道另外一个只适用于Safari的吗?
当前回答
这个hack 100%只适用于safari 5.1-6.0。我刚刚测试成功了。
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .yourcssrule {
your css property
}
}
其他回答
我已经测试过了，它对我很有效
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .myClass {
height: 1070px !important;
}
}
这个hack 100%只适用于safari 5.1-6.0。我刚刚测试成功了。
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .yourcssrule {
your css property
}
}
当使用这个Safari专用过滤器时，我可以针对Safari (iOS和Mac)，但排除Chrome(和其他浏览器):
@supports (-webkit-backdrop-filter: blur(1px)) {
.safari-only {
background-color: rgb(76,80,84);
}
}
顺便说一下，对于那些只需要在移动设备上使用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>
对于那些想要在Safari 7.0及以下版本而不是7.1及以上版本上实现黑客攻击的人，请使用:
.myclass { (;property: value;); }
.myclass { [;property: value;]; }
