流浪垂直线以上965个像素，在Safari边框半径(Stray vertical line abov

我发现，如果我有一个div的宽度大于965个像素，并且在少于全部4个角的边界半径，有在div流浪垂直线。这里有一个的jsfiddle链接... http://jsfiddle.net/Z3vFp/4/ 。请注意，这仅发生在Safari浏览器。有什么想法吗？还要注意的是965像素阈值可以在的jsfiddle有点不同。

编辑：我在MacBook Pro上配备Retina显示屏。我想这是一个RMBP的事情吗？

编辑2：这里有一个的jsfiddle撷取画面。 http://i.imgur.com/0rqSS.png

Answer 1:

添加-webkit-background-clip: padding-box;

.foo {
    width: 966px;
    height: 50px;
    background-color: lightgray;
    padding: 25px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    -webkit-background-clip: padding-box;
}

Answer 2:

我观察到我13" 的Mac书临（OSX 10.8）的Safari版本6.0（8536.25）这个问题。所以它无关，与视网膜显示器，它在应用边界半径只有一个，两个或三个角发生。解决的办法是边界半径适用于所有的四个角落。

这个代码显示杂散垂直线：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:red}
#myBox {
  width: 960px;
  height: 300px;
  background-color: white;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  margin: auto;
}
</style>
</head>
<body>
<div id="myBox">
</div>
</body>
</html>