7

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

编辑：我在配备 Retina 显示屏的 Macbook Pro 上。我猜这是一个rMBP的东西？

编辑 2：这是一个 jsFiddle 屏幕截图。http://i.imgur.com/0rqSS.png

4

3 回答 3

10

添加-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;
}​
于 2012-08-30T20:11:58.433 回答
0

我在 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>
于 2012-08-22T13:22:09.423 回答
-1

即使所有四个角都设置为例如：5px，我也可以打开它

问题是 - 我不使用边界半径是因为苹果野生动物园有一个错误 - 还是等待苹果解决它

我估计要等苹果来解决 - 为富人服务，而我们农民不得不遭受 PC 的折磨

~（这是第三次世界大战爆发前的笑话）

于 2013-02-13T14:41:58.337 回答