如果位置：相对，圆角无法切断 webkit 浏览器中的内容答案

【问题标题】：Rounded corners fail to cut off content in webkit browsers if position:relative如果位置：相对，圆角无法切断 webkit 浏览器中的内容
【发布时间】：2011-09-02 22:00:38
【问题描述】：

如果position:relative;，圆角无法截断 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;
}

有人知道解决办法吗？谢谢-

【问题讨论】：

使用 FF4 对我来说工作正常。你使用的是什么浏览器？此外，您可以尝试在 div 中添加 2px 填充。
@Bryce- 正如我在问题中所说，这是 Webkit (Chrome) 的问题，而不是 Gecko (FF4) 浏览器的问题。
这是 webkit 中的一个错误。您可以在bugs.webkit.com 提交票证吗？
更正保罗的链接..它是bugs.webkit.org，你可以在这里提交票
bugs.webkit.org/show_bug.cgi?id=54189

标签： html css webkit rounded-corners

【解决方案1】：

请看这个link。这解决了你的问题。

#wrapper {
    margin-top:250px;
    width: 300px; 
    height: 300px;
    border-radius: 100px;
    overflow: hidden;
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

【讨论】：

【解决方案2】：

你可以强制它以 3d 呈现：

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

【讨论】：

【解决方案3】：

我在一个项目中遇到了同样的问题，并通过对 CSS 稍作改动来解决它

我没有将 position 设置为 relative，而是将其设置为 inherit：

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

这完美地解决了问题。

【讨论】：

不是解决方案——继承只会使用父元素的任何位置

【解决方案4】：

你可以给内部 div 赋予相同的边框半径：http://jsfiddle.net/eCsA3/8/

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

<style type="text/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;
    -moz-border-radius: 12px;
    border-radius: 12px;   
}
</style>

【讨论】：

@Flauwekeul- 这可以在这个简单的示例中使用，但不能解决当外部 div 包含更复杂的内容且不一定与角落齐平的问题。

【解决方案5】：

只需将内部设置为与外部相同的边框半径即可。

.inner {
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
}

哦，别忘了 webkit 人。 :]

【讨论】：

【解决方案6】：

试试这个作为.inner的CSS：

.inner {
    background: red;
    height: 50px;
    position: absolute;
    top: 1px;
    left: 12px;
    right: 12px;
    bottom: 1px;
}

您将需要调整 bottom 和 top 以获得正确的高度。如果保持不变，该类将只有一个像素的高度。此方法会将左右边距设置为边框半径，因此边缘不会出现任何内容。

或者，如果您在.outer 周围有纯色背景，您可以制作这样的图像：其中内部区域（图像中的方格区域）是透明的，外部区域是背景颜色。然后使用边框图像或绝对定位将其放置在角落所在的位置。给它一个高z-index。滚动时，内容将隐藏在角落的填充部分下方。

【讨论】：

我将您的解决方案放在the JSFiddle 中，但它根本不起作用。在 Safari 中，它会将整个 div 折叠成一条水平线。
这就是为什么您应该将bottom 添加为属性（正如我所说）。我会更新我的答案以使其更清楚。

【解决方案7】：

http://jsfiddle.net/USd5s/

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

【讨论】：

这行得通，但是正如所表明的，这只是针对 webkit 错误的黑客攻击。进一步的测试表明，在对下面的元素执行 CSS 转换时，这种技术会失败。只有在转换完成后，overflow:hidden 才能再次正常工作。
@Joshua 你能帮我把它放在一边吗？

【解决方案8】：

正如 Paul 所说，webkit 中的错误，但是您仍然可以使用内部 div 的边距来解决它。

【讨论】：

【解决方案9】：

我相信我在某处读到过，您必须将容器夹在某个东西上才能解决此问题。我不太确定，但我认为这是要走的路。

【讨论】：