Iframe隐藏容器样式

Question

我正在设计一个网站，它有一个半透明的内容容器，分为两列。我的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里放新闻。如果我在主div里嵌入一个iframe里的视频，那么内容的半透明背景(以及下拉阴影)就不会渲染了。我找到了很多解决方案，如果你想在iframe上覆盖一个div，但没有关于将iframe放在div容器中会破坏该容器的样式。

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

Answer 1

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

Answer 2

试试这个…

html content:

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

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

谢谢你的帮助。