Safari无法识别样式为按钮的链接的边界半径

Question

我有以下html：

a {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  text-decoration: none;
  color: initial;
  border-radius: 5px;
  padding: 2px;
  box-shadow: 2px 2px grey;
}

<div id="github">
  <a href="https://github.com/theghall">Github repos</a>
</div>

这在Chrome中有效。在Safari 11.1.2中，它确实显示为按钮，但是border-radius和box-shadow无效。

Answer 1

尝试删除这些行：

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

然后使用CSS重新创建按钮样式。您主要需要一个边框，一个盒子阴影和一个渐变背景。

外观与按钮外观冲突。尝试为iOS的下拉菜单设置样式时，我遇到了同样的问题。这是不可能的，直到我使用CSS重新创建它为止。