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

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

{{1}}

我在Chrome中进行了测试，解决了这个问题。

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

Answer 2

只需删除以下这些行：

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

<a>是可点击的元素类型。超链接。 display: block会在这里做你想做的事。
＆＃34;外观属性用于使用基于用户的平台本地样式显示元素。操作系统的主题。＆＃34;

（我认为它们仍然很难看，但这不是重点:)）

Answer 3

现在是CSS：

a.oval-box{
 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%;
 height: 4em;
 width: 12em;
 position: relative; }

a.oval-box:hover {
 color:#ffffff;
 background-color: #f00667e;
 text-decoration: none;
 border-color: #f89520;}

我用一个按钮开始这个，所以我陷入了思考按钮。但正如你所指出的，它只是一个风格的块，我根本不需要按钮命令。

感谢。

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

3 个答案: