Safari Border Radius剪辑问题

时间:2013-11-21 12:35:19

标签: html css safari

我知道有类似的问题已被问到,但他们都指出背景剪辑不起作用。

顶部是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的最佳方法是什么?

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

试试这个......

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

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