Question

我注意到如果我有一个宽度大于965像素且边界半径小于所有4个角的div，则div中有一条迷路垂直线。这是一个jsFiddle链接...... http://jsfiddle.net/Z3vFp/4/。请注意，这只发生在Safari中。有什么想法吗？另请注意，jsFiddle中的965像素阈值可能略有不同。

编辑：我在带有Retina显示屏的Macbook Pro上。我想这是一个rMBP的事情？

编辑2：这是一个jsFiddle screencap。 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

我在使用Safari版本6.0（8536.25）的13“Mac Book Pro（OSX 10.8）上观察到此问题。因此它与视网膜显示无关。当您仅将边框半径应用于一个，两个或三个角。解决方案是将边界半径应用于所有四个角。

此代码显示一条迷路垂直线：

<!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>

Answer 3

即使将所有四个角设置为例如：5px

，我也会接受它

问题是 - 我不使用border-radius，因为apple safari有一个bug - 或者等待苹果将其排序

我认为等待苹果解决问题 - 在我们农民不得不遭受PC祸害的情况下为富人提供服务

〜（这是WW3爆发前的一个笑话）

在Safari中，带有边框半径的965像素以上的杂散垂直线

3 个答案: