Chrome 在 div 之外溢出 iframe 背景？

Posted 2023-03-06

【中文标题】Chrome 在 div 之外溢出 iframe 背景？

【英文标题】：Chrome overflows iframe background outside of div?

【发布时间】：2012-01-08 06:26:05

【问题描述】：

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

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

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

【问题讨论】：

Is this what you're trying to achieve? 因为这在 Chrome 中对我有用。你的项目有什么不同？

感谢您的回复。我能够使用该站点重新创建问题：jsfiddle.net/tX3Xc/3

【参考方案1】：

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

【参考方案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

【讨论】：

我什至不知道有默认边框。 （使用样式表重置值。）不过，它对背景颜色没有帮助：jsfiddle.net/tX3Xc/4

这显然是position: absolute 问题。无法确切告诉您原因，但删除它可以解决问题。也不是说结果是一个完美的圆，虽然......

不幸的是，这对我没有多大帮助，因为我需要它以这种方式定位。不过还是谢谢。

是的，我担心这可能不是很有帮助；我只是指出我发现正在发生的事情。知道了这一点，我已经能够构建一些我希望可能适用于您的解决方法。请参阅我的更新答案。

这很好用！谢谢！作为一个奇怪的旁注，我无法在课堂上应用这些样式。虽然 Firefox 可以看到类中的样式，但 Chrome 没有选择任何样式！它只能内联工作！我开始觉得 Chrome 是新的 IE！大声笑