边界半径不工作在链接按钮在铬

I have styled an oval button and it in an a element with the class .button

我已经为一个椭圆形按钮设计了样式，并将它放在一个元素中，其中包含class .button

It works and looks great on firefox, but I get a rectangular button in Chrome, without a border. The link still works but the border and border-radius seems to be misunderstood.

它在火狐上运行良好，看起来也不错，但我在Chrome上有一个矩形按钮，没有边框。这种联系仍然有效，但边界和边界半径似乎被误解了。

This is the CSS:

这是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; }

Here is the HTML:

HTML:

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

This is it in the wild: https://www.frontiercomputercorp.com/

这就是野生的:https://www.frontiercomputercorp.com/

I am assuming I've done something wrong with the border-radius that's unique to chrome, but I'm not skilled enough to know if it's being caused by the way I'm calling the class.

我假设我对chrome特有的边界半径做了一些错误的处理，但是我还没有足够的技能去知道它是否是由我调用类的方式引起的。

To recap: In firefox the button is oval (as I wanted) In Chrome it is rectangular

总结一下:在火狐浏览器中，按钮是椭圆形的(正如我所希望的)，而在Chrome中，按钮是矩形的

HeLP!

的帮助!

3 个解决方案

#1

Remove the following lines and it will be fixed:

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

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

I tested it in Chrome and it fixed the problem.

我在Chrome上测试过，它解决了这个问题。

The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.Therefore it overrides your border-radius code as Chrome natively doesn't set border-radius for the button. By not to adding appearance or setting it to none, you won't have this problem in Chrome too.

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

#2

Just delete these lines below:

只需要删除以下几行:

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

<a> is a clickable type of element. A hyper-link. display: block will do what you want here.
是一个可点击的元素。一个链接。显示:块将做你想在这里。
"The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme."
“外观属性用于使用基于用户操作系统主题的平台本地样式显示元素。”

(I think they are still ugly, but that's not the point here :) )

(我认为他们仍然很丑，但这不是重点:)

#3

Here's the CSS now:

这是现在的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;}

I started this with a button so I got stuck thinking button. But as you have pointed out, it's just a styled block and I don't need the button comand at all.

我从一个按钮开始，所以我陷入了思考。但正如你所指出的，它只是一个样式的块，而我根本不需要按钮。

Thanks.

谢谢。

#1