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