<iframe> 在它的 <div> 容器之外渲染？答案

【问题标题】：<iframe> rendering outside of it's <div> container?<iframe> 在它的 <div> 容器之外渲染？
【发布时间】：2019-07-23 19:17:29
【问题描述】：

这里有点困惑。我的代码是否有问题，或者这是否表明我根本不知道的 JS/PHP 冲突或 iframe 错误...？

以下 iframe（嵌入 vimeo）始终在其容器 div 之外呈现。

此 HTML 标记：

<div class="slider">

  <!--- Image --->
  <div class="single-event-image-bg tb-overlay single-event-slides" style="background-image:url(<?php echo tribe_event_featured_image( null, 'large', false, false ); ?>);">
  </div>

  <!-- Video -->
  <div class="iframe-container">
    <iframe id="single-event-video" class="single-event-video" width="668" height="415" src="https://player.vimeo.com/video/320740213" frameborder="0" mozallowfullscreen webkitallowfullscreen allowfullscreen>
    </iframe>
  </div>
</div>

正在渲染：

我尝试过使用不同的标签、删除 php、类名并停用我试图让它在其中工作的 javascript 滑块。即使没有上述任何内容，它仍然会在 div 之外呈现。

iframe 上的 CSS 很简单：

iframe { display: block; position: relative; width:100% max-width:100% }

编辑：已在 CodePen 和 StackOverflow 上运行 sn-p 进行测试。标记似乎工作正常。所以问题仅限于我们的网站，对可能导致这种行为的任何想法？谢谢

【问题讨论】：

已解决：我不完全确定为什么但从父容器中删除元素 ID 解决了这个问题。我找不到的任何 CSS 或 Javascript 都没有使用该 ID，它也不是一个常见的 ID 名称。但是，一定是与某处以 ID 名称为目标的东西发生冲突，进而影响了 iframe 标记。

标签： html css iframe embed vimeo

【解决方案1】：

已解决：我仍然不完全确定为什么，但从父容器中删除元素 ID 解决了这个问题。我找不到的任何 CSS 或 Javascript 都没有使用该 ID，它也不是一个常见的 ID 名称。但是，一定是与某处以 ID 名称为目标的东西发生了冲突，进而影响了 iframe 标记。

【讨论】：