Question

在绝对定位的div中嵌入带有特定src的iframe时，我遇到了一个奇怪的问题。这是页面的基本标记：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

div .container涵盖了整个页面;在其中，有一个div .content相对于.content div绝对定位，不应该被right:-400px属性及其宽度所隐藏，300px html, body CHECK=$(awk -v d1="$(date --date="-5 min" "+[%-m/%-d/%y %H:%M:%S:%3N EEST]")" '$0 > d1' trace.log | grep "java.lang.OutOfMemoryError") { {1}}。

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

当iframe仍在加载时会显示： https://i.imgsafe.org/89a753d.jpg

加载iframe时会显示： https://i.imgsafe.org/8820624.jpg

我在Chrome，Firefox和Edge的最新稳定版本中遇到此问题，所以我认为这可能不是浏览器问题。我确信iframe的其他来源工作得非常好，并没有显示出这个问题。此外，我知道跨源框架无法访问顶部框架的文档属性，这可能使这个故事非常奇怪。

此外，在Chrome或Firebug上的开发者控制台中，没有任何节点显示样式属性（如果某些javascript可以修改原始标记）。我很遗憾地说我不能控制iframe的内容，这在大多数情况下都是跨文本的。

你能告诉我更多关于这个的事吗？我已经阅读了this question，这似乎是一个类似的案例，但它并没有帮助。

P.S。这是我的第一个StackOverflow问题，希望我擅长写它:)随便问一下这个问题。

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

EDIT2：我已经简化了代码，现在date: illegal option -- date=-5 min usage: date [-u] mmddHHMM[[cc]yy][.SS] date [-u] [+format] date -a [-]sss[.fff]规则只是为了切断页面周围的空白区域。

Answer 1

您的代码中存在两个问题。

第一个是无用的复杂性。

第二个问题是定位错误。 right属性会从右边缘放置元素 x 单位。当你给它的值小于零时。它将被放置在后面的右边缘。

这是工作小提琴：JSFiddle。

MDN on position property

MDN on right property

那为什么你的代码不起作用？由于您overflow: hidden; width: 100%;几乎给出了所有元素（无用的复杂性，只需将其添加到真正需要它的地方;也避免将任何规则赋予html - 它可以是棘手）。加载错误定位的iframe浏览器后，由于overflow而导致内容的“half”被删除。

更新小提琴：here。

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

Answer 2

您的代码存在一个问题，即＃34;右：-400px;＆＃34;只是避免负号。用＆＃34;右键：400px;＆＃34;。

交换它

在if absolute

2 个答案: