在绝对div中嵌入iframe时出现浏览器问题

在绝对定位的div中嵌入具有特定src的iframe时遇到了一个奇怪的问题。这里是页面的基本标记：在绝对div中嵌入iframe时出现浏览器问题

.container { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
html, body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.content { 
 
    position: absolute; 
 
    top: 50px; 
 
    right: -400px; 
 
    width: 300px; 
 
    height: 400px; 
 
    background-color: blue; 
 
} 
 
iframe { 
 
    width: 300px; 
 
    height: 200px; 
 
}

<div class="container"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo sit amet elit sed cursus. Fusce nibh nibh, venenatis consectetur hendrerit sed, aliquam sit amet eros. Sed sem augue, tristique ut odio sit amet, euismod bibendum nunc. Nullam ac ligula pharetra, ultrices lorem id, porttitor enim. Nullam sit amet sagittis erat. 
 
    <div class="content"> 
 
     <iframe src="https://app-apac.thebookingbutton.com/properties/yaangcomedirect"></iframe> 
 
    </div> 
 
</div>

股利.container覆盖整个页面;在里面，有一个div .content相对于.content div绝对定位，它应该不可见，由right:-400px属性和宽度隐藏，即300px。

当iframe加载时，整个页面似乎被“滑动”到左边。您可以通过插入的虚拟文本，即时剪切以及现在部分可见的iframe来查看此行为。

这显示，当iframe中仍然加载： https://i.imgsafe.org/89a753d.jpg

当iframe中加载，这是图所示： https://i.imgsafe.org/8820624.jpg

我遇到了在Chrome，Firefox的这个问题，并在边缘的最新的稳定版本，所以我认为这可能不是浏览器问题。我知道iframe的其他来源工作得很好，并没有显示这个问题。另外，我知道一个交叉源框架无法获得顶层框架的文档属性，这可能是使这个故事非常奇怪的原因。

此外，在Chrome或Firebug的开发者控制台中，没有任何节点显示样式属性（如果某个javascript可以修改原始标记）。我很抱歉地说，我不控制iframe的内容，这是大多数情况下的交叉来源。

你能告诉我更多关于那个吗？我读过this question，这似乎是一个类似的情况，但它没有帮助。

P.S.这是我的第一个StackOverflow问题，希望我一直擅长写它:)随时提出更多的问题。

编辑：绝对定位div必须在该位置。显然它应该被隐藏起来，这就是想要的行为。我无法弄清楚为什么在iframe加载后突然变得可见。

编辑2：我简化了代码，现在html, body规则只是为了切断页面周围的空白。

来源

2016-04-22 Marco

你的代码有两个问题。

第一个是无用的复杂性。

第二个问题是定位错误。 right property will place your element xunits from right edge。当你给它的值小于零。它将放在的右边缘。

这里是工作小提琴：JSFiddle。

MDN on position property。

MDN on right property。

那么，为什么你的代码没有工作？因为给几乎每一个元素的overflow: hidden; width: 100%;你可以（无用的复杂性，只需添加它，你真的需要它;也避免让任何规则html - 它可能会非常棘手）。装车错误定位iframe浏览器滚动到它，并“半壁江山”后，内容的被切断，因为overflow的。

更新提琴：here。

更新的小提琴＃2（最好的）：JSFiddle。

来源

2016-04-22 10:40:56 Green

我试图重现生产环境。包含iframe的div实际上应该在右边后面，并且即使在iframe加载之后也应该在后面。关于复杂性，容器div必须在浏览器窗口的100％宽度和高度上。 – Marco

@MarcoTodisco请参阅为什么它不起作用的说明。 – Green

感谢您的有用编辑。我简化了示例，从html和body选择器中删除了溢出和位置属性。但问题仍然存在。实际上，浏览器会滚动到iframe，但如果iframe是交叉原点，这将如何实现？ – Marco

有一个问题与您的代码，这是“正确的：-400px;”只是避免负面的迹象。用“right：400px;”替换它。

来源

2016-04-22 10:45:07 Laksh

在绝对div中嵌入iframe时出现浏览器问题

回答

相关问题