Mac上的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

我有同样的问题，有一些额外的空间，我无法摆脱。我尝试了很多东西，最后使用不同的字体解决了这个问题。