web-dev-qa-db-ja.com

サファリ5のCSSハック

Webページを開発していますが、クロスブラウジングテストをテストすると、CSSスタイルがgoogle chromeおよびsafari5と競合するようになりました。

すべてのブラウザ（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ハックはありますか？私は多くのことを試しましたが、どれもうまくいきませんでした。

csscss3safaricross-browsercss-hack
6
gadss

疑似クラスを介して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%;
    } 
}
13
user2550776
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari only override */
    ::i-block-chrome,.flex-direction-nav-featured a {
        margin-top: 5%;
    } 
}
2
Sagar