6

我正在开发一个网页,当我测试交叉浏览测试时,我的 CSS 样式与我的 google chrome 和我的 safari 5 发生冲突。

我所有浏览器的代码(firefox、chrome、opera)

.flex-direction-nav-featured a{
       margin-top: 4%;
   } 

我试试这个,但它不会工作

/* for safari only (wont work)*/
::root .flex-direction-nav-featured a{
    margin-top: 5%;
}
/* for safari only (but works with chrome also)*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
      /* works with sfari and chrome */
   .flex-direction-nav-featured a{
       margin-top: 5%;
   } 

}

是否有仅针对 Safari 5 的 CSS hack?我尝试了很多东西,但都没有奏效。

4

2 回答 2

13

您可能想尝试通过伪类阻止 chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .flex-direction-nav-featured a{
        margin-top: 4%;
    } 

    /* Safari only override */
    ::i-block-chrome,.flex-direction-nav-featured a{
        margin-top: 5%;
    } 
}
于 2013-07-04T14:30:45.640 回答
2
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari only override */
    ::i-block-chrome,.flex-direction-nav-featured a {
        margin-top: 5%;
    } 
}
于 2014-02-12T08:09:28.557 回答