Safari边界半径裁剪问题

我知道类似的问题已经被问到，但他们都指向背景剪辑不工作。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浏览器的最佳方式？

来源

2013-11-21 David

第一步是发布您的HTML和CSS，第二个是做的jsfiddle，那么我们将看到的。 –

Safari发生了什么版本？这是旧版本的一个已知问题（也包括旧版本的其他浏览器），但我认为它现在已经修复。 – Spudley

@Spudley Safari 5.1.7 Windows。 – David

这个怎么解决呢？我加左：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

来源

2013-11-25 07:37:42

这几乎可以工作，但正如你可以从这个巨大的版本中看到的（稍微好一点），http://jsfiddle.net/QbtuQ/4/那里的像素左右的“白色”空间没有完全填满。在处理10像素高度时，效果会更差。任何想法修复？ – David

看看当我删除边界并在父级上设置背景时会发生什么。 http://jsfiddle.net/QbtuQ/5/如果你想填充1px的空格并且仍然有边框，你只需要做.child {border-radius：49px;}。现在对我来说似乎很好。 http://jsfiddle.net/QbtuQ/6/ –

这几乎可以工作，但正如你可以看到一个更大的边框，不是很：http://jsfiddle.net/QbtuQ/7/所以我纠正了这一点有点不同解决方案：http://jsfiddle.net/QbtuQ/8/似乎在Safari和IE工作正常。其余的可能也很好。 – David

试试这个＆hellip;

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

来源

2013-11-21 12:42:25 Kabb5

从原帖：“但他们都指向后台剪辑，这是行不通的。” – David

Safari边界半径裁剪问题

回答

相关问题