Chrome浏览器的“链接”按钮中的Border-Radius不起作用

Question

我已经设置了一个椭圆形按钮的样式，并将其设置为.button类的元素

它可以在Firefox上正常运行，但效果很好，但是我在Chrome浏览器中得到了一个矩形按钮，没有边框。链接仍然有效，但是边界和边界半径似乎被误解了。

这是CSS：

a.orange-circle-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
box-shadow: 0 6px 9px 0 rgba(0,0,0,0.4);
border: .5em solid #00667e;
font-size: 1.2em;
text-transform: none;
text-align: center;
font-family: "lato", sans-serif;
line-height: 3em;
color: #ffffff;
background-color: #283f72;
margin: auto;
display: block;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-khtml-border-radius: 50%;
height: 4em;
width: 12em;
position: relative; }

这是HTML：

<a href="https://www.frontiercomputercorp.com/product-category/in-stock/" class="orange-circle-button" target="_blank">Current Stock</a>

就是这样：https : //www.frontiercomputercorp.com/

我假设我在chrome特有的border-radius上做错了什么，但是我不够熟练，无法知道它是否是由我调用类的方式引起的。

回顾一下：在Firefox中，按钮为椭圆形（如我所愿）；在Chrome中为矩形

救命！

Answer 1

删除以下行，它将被修复：

-webkit-appearance: button;
-moz-appearance: button;
appearance: button;

我在 Chrome 中测试了它并解决了问题。

外观属性用于使用基于用户操作系统主题的平台本机样式来显示元素。因此，它会覆盖您的边框半径代码，因为 Chrome 本身不会为按钮设置边框半径。通过不添加外观或将其设置为无，您在 Chrome 中也不会遇到此问题。