如果position：relative，圆角不能剪切webkit浏览器中的内容 [英] Rounded corners fail to cut off content in webkit browsers if position:relative

问题描述

如果 position：relative;

，则圆角不能剪切webkit浏览器请参阅此演示。

See this demo.

HTML： / p>

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;
}

任何人知道一个修复？感谢 -

Anyone know of a fix? Thanks-

推荐答案

http：// jsfiddle。 net / USd5s /

不喜欢添加额外的dom元素，但是一个简单的包装器修复了这个问题。你不必使用我的元素或CSS方法的选择，span和合格的CSS只是我的口味。或者什么也会工作。

Hate to add extra dom elements but a simple wrapper fixes this right up. You don't have to use my choice of element or css method either, span and qualified css is just my taste. or something would work just as well.

这篇关于如果position：relative，圆角不能剪切webkit浏览器中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！