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 背景?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 div 或 iframe 等其他元素上模拟活动输入或 textarea 周围的 Chrome/Safari 边框?