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

【问题标题】：Safari browser and CSS border-radius displaying straight line on right sideSafari 浏览器和 CSS 边框半径在右侧显示直线
【发布时间】：2013-03-16 10:48:50
【问题描述】：

如您在上面的屏幕截图中所见，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;

【问题讨论】：

你确定它没有被它的包含元素截断？
请发布您的 HTML，如果可能，请发布 jsFiddle。
请分享JS小提琴链接
父元素上是否设置了background-color？
在原帖中添加了 JSFiddle 链接。当我在 Chrome 中查看它时，它看起来很好，然后我在 Safari 中查看它，它在右侧有一行。

标签： css button safari

【解决方案1】：

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

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

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

祝你好运！

【讨论】：

感谢 CSS 但它没有解决问题。我不太确定这个奇怪问题的解决方案是什么；我想我将不得不进行一些认真的调试并一次更改一件事，直到找到导致问题的原因。如果我找到一个可行的解决方案，我会用解决方案更新这个问题。