Safariのみ、およびIE/Chrome/Firefox/Operaのみのcss適応方法

問題点：Safariだけのcssレイアウト崩れ現象

• IE/Chrome/Firefox/Operaのテストが問題なく、Safariだけであるcssのレイアウトが崩れています
  
  • Safariでは、上記ソーシャルフォローボタンの上下のずれは2pxを生じました。

解決：Safariのみにcss修正を行う

• Safari以外のブラウザに問題を生じていないため、css修正の必要はありません
• Safariのみでのcss修正が必要となります
• Safariのバージョンより、違うコードで修正必要があります

  /* Safari 6.1+ (9.0 is the latest version of Safari at this time) */
  @media screen and (min-color-index:0) 
  and(-webkit-min-device-pixel-ratio:0) { @media
  {
      .(css selector) { 
          (cssプロパティ:値;) 
      }
  }}
  
  /* Safari 6.1-7.0 */
  @media screen and (-webkit-min-device-pixel-ratio:0) 
  and (min-color-index:0)
  {  
      .(css selector) { 
          (cssプロパティ:値;) 
      }
  }
  
  /* Safari 7.1+ (9.0 is the latest version of Safari at this time) */
  _::-webkit-full-page-media, _:future, :root .(css selector) {
          (cssプロパティ:値;) 
  }
  

• IEでは

  /* IE10以上 */
  @media all and (-ms-high-contrast: none){
    .(css selector){
      (cssプロパティ:値;) 
    }
  }

• Chromeでは

  @media screen and (-webkit-min-device-pixel-ratio:0){
    .(css selector){
      (cssプロパティ:値;)
    }
  }
  

• Firefoxでは

  @-moz-document url-prefix(){
    .(css selector){
      (cssプロパティ:値;)
    }
  }