iframe在相鄰顯示中：table-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; 
}