如果position:relative,圆角不能切断webkit浏览器中的内容

Question

圆角不能切断webkit浏览器(例如Chrome)中的内容 position:relative;

看这个演示.

HTML:

<div class="outer">
    <div class="inner">
    </div>
<div>

CSS:

.outer {
    background:yellow;
    border:solid 1px black;
    position:relative;/* Setting this means rounded corners don't cut off content! */
    overflow:hidden;

    -moz-border-radius: 12px;
    border-radius: 12px;   
}
.inner {
    background:red;
    height:50px;
}

有人知道修复吗？谢谢-

Answer 1

http://jsfiddle.net/USd5s/

讨厌添加额外的dom元素,但是一个简单的包装器修复了这个问题.您不必使用我选择的元素或css方法,span和合格的css只是我的口味.或者某些东西也会起作用.

Answer 2

您可以强制它在3d中渲染:

-webkit-transform: translateZ(0);   
-moz-transform: translateZ(0);   
transform: translateZ(0);