Mac Safari

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

我遇到了同样的问题，有一些额外的空间，我无法摆脱。我尝试了很多事情，最后使用其他字体解决了这个问题。