我试图找到一种方法来应用CSS只是Safari，但我发现一切也适用于Chrome。我知道这些目前都是WebKit浏览器，但我有问题的div对齐在Chrome和Safari;它们的显示方式不同。
我一直在尝试使用这个，但它也会影响Chrome:
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
有人知道另外一个只适用于Safari的吗?
当前回答
嗨，我做了这个，它为我工作
@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 7.0及以下版本而不是7.1及以上版本上实现黑客攻击的人，请使用:
.myclass { (;property: value;); }
.myclass { [;property: value;]; }
如此:
@media not all and (min-resolution:.001dpcm) {
@media {
/* your code for Safari Desktop & Mobile */
body {
background-color: red;
color: blue;
}
/* end */
}
}
在(.myClass)中替换你的类
/*只支持Safari */ .myClass:没有(:根:根){ 在这里输入代码 }
当使用这个Safari专用过滤器时，我可以针对Safari (iOS和Mac)，但排除Chrome(和其他浏览器):
@supports (-webkit-backdrop-filter: blur(1px)) {
.safari-only {
background-color: rgb(76,80,84);
}
}
它在safari中100%工作，我试过了
@media screen and (-webkit-min-device-pixel-ratio:0)
{
::i-block-chrome, Class Name {your styles}
}
