CSS Mac Safariの余分なパディングを一覧表示

Question

Mac SafariのChromeとFirefoxで正常に動作するこのシンプルなリストアイテムは、テキストに高さの問題があり、コンテナ内で垂直に配置されていません。

私が間違っているつもりです

li { 
 
    padding:10px 20px 10px 20px; 
 
    background:grey; 
 
    color:white; 
 
    text-align:center; 
 
    border-radius:10px; 
 
    list-style:none; 
 
    }

<ul> 
 
    <li> 
 
     CLICK ON ME 
 
    </li> 
 
</ul>

？あなたが唯一のクロムとサファリの属性にスタイリングを与え、その後、uはクロムスタイリングを上書きし、このどこかに見つけ

Answer 1

li { 
 
    padding:10px 20px 10px 20px; 
 
    background:grey; 
 
    color:white; 
 
    text-align:center; 
 
    border-radius:10px; 
 
    list-style:none; 
 
    <!-- Added --> 
 
     display: -webkit-inline-box; 
 
     -webkit-box-pack: center; 
 
     -webkit-box-align: center; 
 
    }

<ul> 
 
    <li> 
 
     CLICK ON ME 
 
    </li> 
 
</ul>

Answer 2

@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Safari and Chrome */ 
.myClass { 
color:red; 
} 

/* Safari only override */ 
::i-block-chrome,.myClass { 
color:blue; 
} 
}