Stray vertical line above 965 pixels with border radius in Safari

前端未结

关注

 3  2005

I\'ve noticed that if I have a div with a width greater than 965 pixels and a border radius on less than all 4 corners, there is a stray vertical line in the div. Here\'s a

相关标签:

3条回答

长发绾君心

2021-01-12 13:51

add -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;
}

0 讨论(0)

面向向阳花

2021-01-12 13:54
I have observed this problem on my 13" Mac Book Pro (OSX 10.8) with Safari Version 6.0 (8536.25). So it has nothing to do with retina display. It occurs when you apply border radius only to one, two or three corners. The solution is to apply border radius to all four corners.

This code displays a stray vertical line:
```
<!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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
囚心锁ツ

2021-01-12 14:15

i get it on even when all four corners are set to eg: 5px

the question is - do i not use border-radius because apple safari has a bug - or wait for apple to sort it out

i reckon wait for apple to sort it out - serves rich people right while us peasants have to suffers PC's

~(that is a joke before WW3 breaks out)

0 讨论(0)
发布评论:

提交评论
- 加载中...