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

这个解决方案怎么样？我添加了左：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

Answer 2

试试这个......

background-clip: padding-box;  
-moz-background-clip: padding;  
-webkit-background-clip: padding;

在此处阅读更多内容：http://www.css3.info/preview/background-origin-and-background-clip/

Safari Border Radius剪辑问题

2 个答案: