html - 为什么在 chrome 中按钮看起来不如在 firefox 中好？

Question

我想在 chrome 中显示按钮，就像在 mozilla firefox 中一样，这里是代码:

.myButton {
     font-size: 14px;
     background:#e3e3e3;
     color:gray;
     padding:11px;
     margin-right: 0;
     width: 100%;
     border: 0;
     border-radius: 4px;
     font: normal 'Roboto Condensed', Helvetica, Arial, serif;
     text-transform:uppercase;
     text-align:center;
     display:inline-block;
     transition:all 0.3s;
     text-decoration:none;
     -webkit-appearance: button;
     cursor: pointer;
     margin:0;
     max-width:100%;
     vertical-align:baseline;
     box-sizing:border-box;
    -webkit-font-smoothing: antialiased;
}
.myButton:hover {
    background-color:#e9e9e9;
}
.myButton:active {
    position:relative;
    top:1px;
}

HTML:

<a href="#" class="myButton">Apply</a>

chrome 中的按钮:

Mozilla 中的按钮:

任何引用或帮助将不胜感激。

Answer 1

你的边框和背景好像有问题。

两者都由 -webkit-appearance: button; 设置因为在 CSS 中，您给出的最后一条指令通常是前导(例如，如果您将背景设置两次，将使用最后一条)。

从您的代码中删除 -webkit-appearance: button; 它应该可以工作。