CSS hack for safari 5

Question

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.

my code for all browsers ( 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.

Solution 1

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

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

Solution 2

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