CSS列表項微胖

Question

我有一個在Chrome和Firefox正常工作在PC上，在Mac上的Safari文本具有一個高度的問題，它不是垂直的容器內居中這個簡單的列表項...

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>

我要去哪裏錯了？

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

發現這個別的地方你給一個造型只在Chrome和Safari的屬性，然後ü覆蓋鍍鉻造型