title: CSS hack for safari 5
body: <p>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.</p>
  
  <p>my code for all browsers ( firefox, chrome, opera)</p>
  
  <pre><code>.flex-direction-nav-featured a{
         margin-top: 4%;
     } 
  </code></pre>
  
  <p>I try this one but it wont work</p>
  
  <pre><code>/* 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%;
     } 
  
  }
  </code></pre>
  
  <p>Is there a CSS hack which only targets Safari 5? I have tried many things but none worked.</p>