为什么在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;，它应该可以正常工作。

Answer 2

在所有浏览器上保持一致的最简单方法是使用APPLY图像作为按钮，它仍然是一个锚链接，但链接内部将是一个。您可以使用photoshop选择您最喜欢的按钮并将其用作链接。