相关疑难解决方法(0)

我需要父div上的圆角来掩盖其孩子的内容.overflow: hidden在简单的情况下工作,但在父级相对或绝对定位时,基于webkit的浏览器和Opera会中断.

这适用于Firefox和IE9:

CSS

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
}

#box {
  width: 300px;
  height: 300px;
  background-color: #cde;
}

HTML

<div id="wrapper">
  <div id="box"></div>
</div>

关于JSFiddle的例子

谢谢您的帮助!

更新:导致此问题的错误已在Chrome中修复.我没有重新测试Opera或Safari.

我有收到一个奇怪的错误,当我使用的组合overflow,border-radius和transition.我有一个div里面有一个img.div具有边框半径和溢出设置为隐藏.当我将鼠标悬停在img上时,我发生了一个过渡,使图像变大以创建缩放效果.问题是溢出似乎在图像的左下角和右下角中断.

我为你创造了一个jsfiddle,看看我在说什么.http://jsfiddle.net/dmcgrew/HuMrC/1/

它在Firefox中运行良好,但在Chrome和Safari中中断.

任何人都知道可能导致此问题或如何修复它？

我在圆形div中做了一些文体,文本在容器顶部碰到了.我已经能够控制几乎所有的内容,嵌套的div,设置为背景的图像等,并将它们全部剪辑成功,但这一次给了我严重的悲伤.

使用旧式图像边框或掩盖不是解决方案,因为我们拥有动态图形背景.我们需要一个实际剪辑文本的解决方案.

这在Firefox 3.x和旧版Chrome中最为明显

以下是要使用的示例代码:

http://jsfiddle.net/vfp3v/1/

div {
    -moz-border-radius: 45px;
    border-radius: 45px;
    background-color: #ccc;
    font-size: 100px;
    color: #777;
    line-height: 70%;
    overflow: hidden;
    width: 257px;
}

jank:

请注意,它已在新的Chrome和FireFox 4中修复 - shui:

我们的大多数网站用户都是Firefox 3.6,所以也希望能够为他们提供优雅的解决方案.任何帮助赞赏!干杯