Question

我在div标签中有一个iframe，其溢出：隐藏，边框半径为50px，使其成为一个圆圈。 iframe源是带有按钮的.aspx页面。单击该按钮会导致回发。在回帖后，我将它从无到有改变背景颜色。

iframeBody.Attributes.Add("Style", "background-color:#FF9090");

它在Firefox和Internet Explorer中完美运行（在IE中很好！！令人惊讶！）但在Chrome中它似乎溢出了背景颜色，形成一个正方形。（所有其他内容完美显示，只是背景渗透。）任何帮助将不胜感激。感谢。

Answer 1

您在示例中看到的正方形是iframe边框。您可以使用样式轻松删除它：

iframe {
    border: 0;
}

当div有position: absolute（或relative时，iframe的内容显然会溢出包含的div。我不太确定为什么会出现这种情况，但你可以通过将div包装在仅包含div和iframe的容器中来解决这个问题，并将定位移动到该元素：

<div id="outer">
    <div>
        <iframe></iframe>
    </div>
</div>

#outer {
    position: absolute;
    width: 100px;
    height: 100px;
}

#outer > div {
    border-radius: 50px;
    height: 100px;
    width: 100px;
    overflow: hidden;
    border: 5px solid #D3D3D3;
}

iframe {
    border: 0;
    background-color: pink;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

完成此操作后，您会注意到iframe与边框的一部分重叠。如果您只是删除position: absolute。

，这与您在Chrome中看到的行为相同

现在你已经有了一个包装器，但是，这也是一个很小的修复，也可以将边框移动到那个包装器，它也会解决这个问题，并给你一个漂亮的圆形边框，看起来像所有现代浏览器都是如此。

请注意，您希望将border-radius属性保留在两个 div上，但将border属性移至#outer。现在，由于包装器有一个边框，而它的子包装没有，包装器会略大一些，所以对于一个光滑的圆，它还需要一个略大的边框半径：

#outer {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 5px solid #D3D3D3;
    border-radius: 55px;
}

#outer > div {
    border-radius: 50px;
    height: 100px;
    width: 100px;
    overflow: hidden;
}

iframe {
    border: 0;
    background-color: pink;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

Working demo

Answer 2

还有另一种方法。您可以使用webkit-mask-image并制作透明的PNG图像以用作蒙版（当然也可以使用渐变或更复杂的形状）。目前仅适用于webkit浏览器（Safari / Chrome等），但这相当于不到50％的人。根据观众的不同，可能会有一个选择。

Chrome在div之外溢出iframe背景？

2 个答案: