Safari浏览器和CSS边框半径在右侧显示直线

Question

正如您在上面的屏幕截图中看到的，Macbook Air上的Safari版本6.0.2（8536.26.17）在右侧显示了一条直线的边界半径。 ＆＃34;按钮＆＃34;是一个应用了类的链接标记。此相应按钮在Chrome中正常显示，但不在Safari中显示。这让我很生气，为什么会发生这种情况。

JSFiddle链接：http://jsfiddle.net/unnmv/

这是我使用的CSS：

background: $color;
border: 1px solid darken($color, 15%);
color: $text-color;
cursor: pointer;
display: inline-block;
font: 14px/100% Arial, Helvetica, sans-serif;
outline: none;
padding: 0.5em 2em;
text-align: center;
text-decoration: none;
width: auto;
height: auto;
border-radius:         3px;
-moz-border-radius:    3px;
-webkit-border-radius: 3px;

Answer 1

这对我有用：将以下内容添加到您的CSS中：

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

我注意到浏览器之间存在间距一致性问题，所以我尝试了这个问题，因为我有同样的问题。它对我有用。

祝你好运！