iframe 隐藏容器的样式答案

【问题标题】：Iframe hides styling of containeriframe 隐藏容器的样式
【发布时间】：2013-01-20 03:02:12
【问题描述】：

我正在设计一个网站，它有一个半透明的内容容器，分为两列。我的 CSS：

#content {
  width: 80%; margin-left: 10%; margin-top: 25px; margin-bottom: 25px;
  background-color: rgba(256,256,256,.6); box-shadow: 0 0 6px}

#sidebox {
  width: 25%; padding-left: 2.5%; padding-right: 2.5%; float: right; 
  background-color: #FFF}

#main {
  width: 65%; padding-left: 2.5%; padding-right: 2.5%; float: left}

嵌入视频的 HTML：

<div id="content">

  <div id="sidebox">...</div>

  <div id="main">
    <div class="post">
      <a name="song" />
      <p class="title">New song!</p>
      <p class="date">Posted January 16, 2013</p>
      <center>
  <iframe width="480" height="360"
     src="http://www.youtube.com/embed/tF7DQBlYQGM"
     frameborder="0" allowfullscreen style="margin-left: -3%" />
      </center>
    </div>
  </div>
</div>

我在边箱中放了一些静态的东西，然后将新闻发布到主 div。如果我在 main 的 iframe 中嵌入视频，则内容（以及投影）的半透明背景不会呈现。如果你想在 iframe 上覆盖 div，我发现了很多解决方案，但没有任何关于将 iframe 放在 div 容器中搞砸该容器的样式。

目前嵌入视频的网站：http://physics.nyu.edu/~dzb212/music_index.html

【问题讨论】：

标签： html css iframe youtube video-embedding

【解决方案1】：

我不是 100% 确定它背后的原因，但是如果你将 display:inline-block 添加到你的内容样式中，它似乎对我有用

【讨论】：

这几乎可以正常工作。当我将其添加到内容样式时，iframe 似乎设置在容器中，但实际上已从文档流中删除，因此后续文本或 div 最终被放置在 iframe 下。我尝试在 iframe 之后立即包含一个带有 clear: left 和 clear: both 的 div，但似乎都没有做任何事情。我当然可以添加一个较大的上边距来强制流程看起来正确，但这不是一个优雅的解决方案。
实际上添加上边距对我不起作用。放置视频后，似乎所有后续内容都消失了。

【解决方案2】：

试试这个...

html内容：

<div id="content">
<p> content div </p>
 <div id="sidebox">...</div>
    <div id="main">
        <div class="post">
        <p> main div </p>
            <a name="song" />
            <p class="title">New song!</p>
            <p class="date">Posted January 16, 2013</p>
            <center>
                <iframe width="480" height="360"
                src="http://www.youtube.com/embed/tF7DQBlYQGM"
                frameborder="0" allowfullscreen style="margin-left: -3%" />
            </center>
    </div>
  </div>
 </div>

【讨论】：

当我尝试这个时，“内容 div”落在了容器中，但主 div 和边箱都在容器下方，而不是在容器中。我的代码在 main 和 sidebox div 之后还有一个 <div style="clear: both" />，以便容器将它们都包含在内。不过，这似乎无关紧要，因为它在不包含视频时工作正常，而在包含视频时什么也不做。

【解决方案3】：

我注意到在我的 HTML 中使用 <a href="blah" /> 类型的语句引起了一些奇怪的行为。我的印象是<[stuff] /> 与<[stuff]></[stuff]> 相同，并且它只是一个不包含任何其他元素的便捷简写。但是，我不知道这是否属实，并且我发现大量文本意外地被移动到<a> 元素中。因此我改变了

<iframe width="480" height="360" src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%" />`

到

<iframe width="480" height="360" src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%"></iframe>

一切似乎都正确显示。我什至在内容样式中不再需要display: inline-block。

感谢您的帮助。

【讨论】：