html - Safari Border Radius 裁剪问题

Question

我知道有人问过与此类似的问题，但它们都指向无法正常工作的背景剪辑。

顶部是 Safari，底部是其他人:http://tinypic.com/r/2ng616v/5

我的 HTML 是如何构建的:

<div class="parent" style="border:1px solid gray;border-radius:5px">
        <div class="child"></div>
</div>

使用此设置修复 Safari 的最佳方法是什么？

Answer 1

这个解决方案怎么样？我添加了 left: 0;并减少.child 的宽度。如果您需要更改其大小，只需更改宽度而不是左侧位置即可。

.parent {
width:200px;
height:30px;
border-radius:15px;
overflow:hidden;
position:relative;
border:1px solid black;
}
.child {
width:70px;
height:30px;
border-radius:15px;
position:absolute;
left:0px;
background:red;
}

jsfiddle