Webkit的不尊重溢出：隐藏与边界半径 [英] Webkit not respecting overflow:hidden with border radius

问题描述

我在使用CSS3可爱的星际红警动画。我的一个父元素有一个边界半径与溢出一起：隐藏，以便任何内容被裁剪的形状边界半径。

I have a lovely Star Trek Red Alert animation using CSS3. One of my parent elements has a border-radius along with overflow:hidden so that any content is cropped to the shape of the border radius.

这一切工作正常在Firefox，但WebKit浏览器留下一些子元素挂在裁剪的区域之外。

This all works fine in Firefox but Webkit browsers leave some child elements hanging outside the cropped area.

下面是我的code：

<一个href=\"http://jsfiddle.net/doublewombat/EqK6R/embedded/result/\">http://jsfiddle.net/doublewombat/EqK6R/embedded/result/

的 DIV 类名 curvedEdges 的边界半径和溢出：隐藏。然而左，放块;右侧的警报文本挂这个半径以外，即使它们是 curvedEdges 的子元素。或用简单的英语，动画的左，右边缘应该稍微弯曲（如火狐），而不是直奔死角。

The div with the class name curvedEdges has the border-radius and overflow:hidden. However the blocks left & right of the 'Alert' text hang outside of this radius, even though they are child elements of curvedEdges. Or in plain English, the left and right edges of the animation should be slightly curved (as in Firefox), not dead straight.

因此​​，这是在WebKit的一个bug，或者有我有什么不对？

So is this a bug in Webkit, or have I got something wrong?

这是YouTube上的，如果你没有一个WebKit浏览器方便...

Here it is on YouTube if you don't have a Webkit browser handy...

http://www.youtube.com/watch?v=3vyVy21nWsE

推荐答案

您可以把一个绝对定位的div在它与一个边界半径和厚厚的黑色边框，它会阻止你想得被隐藏的部分。

You could put an absolute positioned div over it with a border-radius and a thick black border, it will block the parts you want too be hidden.

我做了一个演示约在FF3.6类似的问题另外一个问题： http://jsfiddle.net / vfp3v / 15 /

I made a demo for another question about a similar problem in FF3.6: http://jsfiddle.net/vfp3v/15/

<一个href=\"http://stackoverflow.com/questions/5684749/border-radius-overflow-hidden-and-text-is-not-clipped/5685061#5685061\">border-radius;溢出：隐藏，和文字不会被截断

这篇关于Webkit的不尊重溢出：隐藏与边界半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！