如何使CSS3圆角隐藏溢出在Chrome / Opera [英] How to make CSS3 rounded corners hide overflow in Chrome/Opera

问题描述

我需要父div上的圆角，以掩盖其孩子的内容。 overflow：hidden 在简单的情况下工作，但是当父项相对或绝对地定位时，在基于webkit的浏览器和Opera中断。

I need round corners on a parent div to mask content from its childen. overflow: hidden works in simple situations, but breaks in webkit based browsers and Opera when the parent is positioned relatively or absolutely.

这在Firefox和IE9中有效：

This works in Firefox and 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示例

感谢您的帮助！

UPDATE：此问题已在Chrome中修复。我没有重新测试Opera或Safari。

UPDATE: The bug causing this issue has been since fixed in Chrome. I have not re-tested Opera or Safari however.

推荐答案

不管大家，我设法解决这个问题，之间。

Nevermind everyone, I managed to solve the problem by adding an additional div between the wrapper and box.

CSS

#wrapper {
    position: absolute;
}

#middle {
    border-radius: 100px;
    overflow: hidden; 
}

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

HTML

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

感谢所有帮助过的人！

http://jsfiddle.net/5fwjp/

这篇关于如何使CSS3圆角隐藏溢出在Chrome / Opera的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！