css - 相邻显示中的 iframe :table-cell element pushes down the content on its neighboring cell

Question

我正在尝试创建两个并排的 div 元素，但我发现在左侧元素中有一个 iframe 会推送右侧的内容元素向下。

像这样:

<div style="display: table;">
  <div style="display: table-cell;">
    <iframe src="" style="height: 100px; width: 100px;"></iframe>
  </div>
  <div style="display: table-cell;">
    <span>Why am I pushed down 100px?</span>
  </div>
</div>

当我使用float:left 元素时，或者当我使用表格时，不会出现这种现象。这是一个说明所有情况的 jsfiddle:http://jsfiddle.net/shazow/S6JXp/

是否有可能拥有一个基于display: table-cell 的布局，而一个单元格不会受到另一个单元格内容的影响，即使它包含一个 iframe？

更新:用已接受的答案更新了 jsfiddle:http://jsfiddle.net/shazow/S6JXp/1/

Answer 1

在 IE8 + 9、Firefox 和 Chrome 中，我没有看到 div 被按下。只有当我用 IE7 查看它时，它才会被推下。但那是因为 IE7 不支持表格单元格。

对我来说你的代码有效。

要将文本置于顶部，请更改此类:

.fun-table-cell .cell {
    display: table-cell;
    width: 50%;
    vertical-align:top;
    background: yellow;
}