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

Question

如上图所示，Macbook Air 上的 Safari 版本 6.0.2 (8536.26.17) 在右侧以直线显示边框半径。“按钮”是一个链接标签，上面应用了一个类。同样的按钮在 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 */

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

祝你好运！