css - Border-Radius 在 Chrome 上的链接按钮中不起作用

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 独有的边框半径做错了，但我不够熟练，无法知道它是否是由我调用类的方式引起的。

回顾一下:在 Firefox 中，按钮是椭圆形的(如我所愿)
在 Chrome 中它是矩形的

帮助!

Answer 1

删除以下几行，它将被修复:

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

我在 Chrome 中对其进行了测试，并解决了问题。

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