Проблемы с позиционированием в Firefox?позиция: относительная для отображения: элемент таблицы

Question

У меня самая странная проблема с позиционированием, которая появляется только в Firefox.

Мой HTML:

<article id="one" class="layer"></article>
<article id="two" class="layer"></article>
<article id="three" class="layer">
   <div class="left"></div>
   <div class="right"></div>
</article>

Мой CSS:

html, body {
  margin: 0; padding: 0;
  height: 100%;
  width: 100%;
}

article.layer {
  position: relative;
  display: table;
  height: 100%;
  width: 100%;
}

article .left, article .right {
  position:absolute;
  width: 50%;
  height: 100%;
  min-height:100%;
  display:table;
}

article .left { left: 0; top: 0; }
article .right { left: 50%; top: 0; }

Таким образом, каждая статья имеет значение display:table, ширину 100% и высоту 100%. Тело и HTML также 100% шириной и высотой. Поэтому каждая статья в точности соответствует размеру текущего окна браузера.

Обратите внимание, что каждый article.layer установлен на position:relative.

В последней статье есть два div s, которые расположены absolute, поэтому один из них расположен слева, а другой - справа.

Это прекрасно работает во всех браузерах, кроме Firefox. В Firefox div.left и div.right последней статьи показаны сверху и перекрывают первую статью…

Вот живая демонстрация: http://jsbin.com/ubulot/edit#preview Протестируйте его в Firefox, и вы увидите проблему. На моем Mac установлен FF 9.0.1.

Есть идеи, что я здесь не так делаю?

Answer 1

Я использую дисплей: таблица сама. Это обходной путь для определенных проблем компоновки, которые отображаются: блок не может решить в достаточной мере. Объяснение длинное, и я не буду вдаваться в подробности.

Это следствие того, что текущая спецификация HTML 4/5 не определяет определенное поведение в отношении «display: table {-x};» и позиционирование.

Из книги «Все, что вы знаете о CSS, не так». BY Rachel Andrew & Kevin Yank:

Обычная практика при позиционировании внутри элемента блока это создать новый контекст позиционирования, установив позицию свойство элемента блока относительно. Это позволяет нам позиционировать элементы в блоке относительно его верхнего, правого, нижнего или оставил. Однако при настройке положения: относительный; на элементе, который также указано значение отображения, связанное с таблицей, позиционирование игнорируются. Такое поведение ранее было задокументировано Аластером Кэмпбелл, который указывает в своей статье, что спецификация CSS 2.1 не ясно, что должны делать браузеры, когда элемент отображается в виде таблицы элемент относительно позиционирован:

Влияние положения: относительно таблицы-строки-группы, table-header-group, table-footer-group, table-row, table-columngroup, элементы столбца таблицы, ячейки таблицы и заголовка таблицы не определены.

Такое поведение, на мой взгляд, самая большая проблема с использованием таблиц CSS для макета ...

Очевидно, что Mozilla просто игнорирует любую попытку установить контекст позиционирования, используя элементы таблицы CSS.

Та же ссылка продолжается с двумя предложениями:

Нет простого подхода к решению этой проблемы с помощью таблиц CSS, но мы можем воспользоваться одним из двух простых подходов для предоставления контекста позиционирования: добавить позиционированный дочерний элемент блока в ячейку или обернуть таблицу в позиционированный элемент.

Нет элегантного решения для этого. Это требует индивидуальной оценки проблемы и индивидуального обходного пути. (

В вашем случае вы могли бы также исключить "position: относительный" из вашего класса "Layer". Для Firefox это бессмысленно.

Поскольку вы создали класс "Layer" в виде таблицы, просто сделайте каждый из s в последнем случае "display: table-cell;".

так что ваш CSS можно сделать так:

.Layer:last-of-type > div
{
display: table-cell;
/* Other formatting here. */
}

Answer 2

Если вы измените значение display:table на display:block, оно будет отображаться нормально, как вы можете видеть здесь . Есть ли причина, по которой вы используете display:table?