メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

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

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プロパティ:値;)
      }
    }

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads