我知道有类似的问题已被问到,但他们都指出背景剪辑不起作用。
顶部是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的最佳方法是什么?
答案 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;
}
答案 1 :(得分:0)
试试这个......
background-clip: padding-box;
-moz-background-clip: padding;
-webkit-background-clip: padding;
在此处阅读更多内容:http://www.css3.info/preview/background-origin-and-background-clip/