相关疑难解决方法(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.

我让Chrome在尊重子元素的边界半径方面遇到了一些麻烦.

这是设置:

<div class='wrapper'>
    <img id='sosumi' src='http://images.apple.com/safari/images/overview_hero.jpg' />
</div>

如果包装器是定位元素(例如位置:相对)并且具有border-radius,则边界半径将不会应用于img内容.

它也不一定是图像.填补背景的任何内容.

这是一个展示问题的简化示例页面.在Safari,Mobile Safari,Firefox或IE中查看,图像的角落将被剪切到圆角.在Chrome中查看图像溢出角落(尽管溢出:隐藏的CSS)并且看起来很丑陋.

看看:https: //dl.dropbox.com/u/433436/no-rounding/index.html

问题:是否有一些解决方法,这不是太疯狂？有谁知道为什么这会影响一个基于WebKit的浏览器而不影响其他浏览器？也许这会很快在Chrome中更新？

我将我的 openlayer 地图集成到一个带有圆角的 div 中。我怎样才能让地图有圆角？我曾尝试将 border-radius 应用于开发人员工具中的许多 div，但地图拒绝圆角。

亚历克斯