我试图找到一种方法来应用CSS只是Safari,但我发现一切也适用于Chrome。我知道这些目前都是WebKit浏览器,但我有问题的div对齐在Chrome和Safari;它们的显示方式不同。

我一直在尝试使用这个,但它也会影响Chrome:

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

有人知道另外一个只适用于Safari的吗?


当前回答

仅限萨拉里

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

其他回答

仅限萨拉里

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

您可以使用媒体查询hack从其他浏览器中选择Safari 6.1-7.0。

@media \\0 screen {}

免责声明:此攻击也针对旧Chrome版本(2013年7月之前)。

当使用这个Safari专用过滤器时,我可以针对Safari (iOS和Mac),但排除Chrome(和其他浏览器):

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

注意:如果只支持ios就足够了(如果你愿意牺牲Safari桌面),那么这是可行的:

    @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */ 
    }

嗨,我做了这个,它为我工作

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

    }

}