Safari 5 的 CSS hack

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15939775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 22:24:16  来源:igfitidea点击:

CSS hack for safari 5

csssafaricross-browsercss-hack

提问by gadss

I am developing a web page and when I test for cross-browsing testing I got my CSS style got conflict with my google chrome and my safari 5.

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

my code for all browsers ( firefox, chrome, opera)

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

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

I try this one but it wont work

我尝试了这个,但它不起作用

/* 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%;
   } 

}

Is there a CSS hack which only targets Safari 5? I have tried many things but none worked.

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

回答by user2550776

You might want to try to block chrome via a pseudoclass:

您可能想尝试通过伪类阻止 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%;
    } 
}

回答by Sagar

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari only override */
    ::i-block-chrome,.flex-direction-nav-featured a {
        margin-top: 5%;
    } 
}