Chrome 在 div 之外溢出 iframe 背景?

Posted

技术标签:

【中文标题】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!大声笑

以上是关于Chrome 在 div 之外溢出 iframe 背景?的主要内容,如果未能解决你的问题,请参考以下文章

溢出:隐藏;不适用于带有 IFRAME 的 Chrome?

将 div 扩展到 iFrame 的边界之外?

div 之外的 Google 组织结构图数据溢出

如何在 div 或 iframe 等其他元素上模拟活动输入或 textarea 周围的 Chrome/Safari 边框?

表格溢出到 div 之外

在 IE 中打印 iframe