Mac Safari上的CSS列表項額外填充

Question

我有一個簡單的列表項，可以在PC上的Chrome和Firefox中正常工作，在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上給該樣式設置了樣式，然后您覆蓋了chrome樣式

Answer 3

我遇到了同樣的問題，有一些多余的空間，我無法擺脫。 我嘗試了很多事情，最后使用其他字體解決了該問題。