Par*_*ier 7 html css safari css3
我注意到如果我有一个宽度大于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
den*_*min 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;
}?
我在装有 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>