html - 如果位置 :relative，圆 Angular 无法切断 webkit 浏览器中的内容

Question

如果 position:relative;

，圆 Angular 无法在 webkit 浏览器(例如 Chrome)中截断内容

查看此 demo .

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

span.outer{
    position:relative;
}

div.outer {
    background:yellow;
    border:solid 1px black;    
    overflow:hidden;    
    -moz-border-radius: 12px;
    border-radius: 12px;   
}

.inner {
    background:red;
    height:50px;
}

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

原始 JSFiddle:http://jsfiddle.net/USd5s/

讨厌添加额外的 dom 元素，但是一个简单的包装器就可以解决这个问题。您也不必使用我选择的元素或 css 方法，span 和 qualified css 只是我的口味。

关于html - 如果位置 :relative，圆 Angular 无法切断 webkit 浏览器中的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6144398/