Chrome 在 div 之外溢出 iframe 背景？

Question

我在一个 div 标签内有一个 iframe，它带有 Overflow:Hidden 和 50px 的 Border-Radius，使其成为一个圆圈。 iframe 源是一个带有按钮的 .aspx 页面。当按钮被点击时，它会导致回发。在回发时，我让它将背景颜色从无变为有。

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

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

Answer 1

还有另一种方法。您可以使用 webkit-mask-image 并制作透明的 PNG 图像以用作遮罩（当然也适用于渐变或更复杂的形状）。目前仅适用于 webkit 浏览器（Safari / Chrome 等），但这相当于不到 50% 的人。可能是一种选择，具体取决于受众。

Answer 2

您在示例中看到的正方形是 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。现在，由于 wrapper 有边框，而它的 child 没有，所以 wrapper 会稍微大一些，所以对于一个光滑的圆，它还需要一个稍大的边框半径：

#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