Проблема Firefox с отображением: абсолют в ячейке таблицы

Question

Я обнаружил проблему при использовании абсолютно позиционированного контента в элементе td.Элемент td не распознается как позиционированный элемент, поэтому содержимое позиционируется относительно body.Эта проблема есть только в FireFox, и ожидаемый макет виден в других браузерах - jsfiddle .

Если немного покопаться, кажется, что проблема связана с FireFox с использованием display:table-cellтип отображения по умолчанию для ячеек таблицы.Я могу решить эту проблему, изменив отображение на block или добавив контейнер div, который будет действовать как позиционированный контейнер для содержимого.

Есть ли основания избегать изменения типа отображения ячейкидо block?Я бы предпочел использовать этот метод вместо добавления дополнительных элементов для исправления проблемы в одном браузере.

Это не та проблема, которая описана в абсолютном стиле div в ячейке таблицы или Почему «display: table-cell» не работает, когда «position: absolute» .

Answer 1

Если вы установите отображение ячейки на block, оно будет помещено в анонимную ячейку таблицы.Результирующее дерево блока CSS такое же, как если бы вы создали <div> внутри ячейки и задали все стили и атрибуты ячейки для этого блока.

Это может быть вполне приемлемым для многих целей.Он сломается, если в ячейке есть интервал между строками или colspan (потому что они ничего не значат для блоков), или если в ячейке есть стили границ, которые вы ожидаете принять в коллапсе границ, или если у вас есть две такие ячейки рядом(потому что тогда два блока будут заключены в одну ячейку таблицы, а не в две отдельные ячейки таблицы).Возможно, есть другие ситуации, когда поведение будет неожиданным.Но если у вас есть достаточный контроль над стилями и содержимым и вы не слишком много делаете стили для ячейки, это сработает.

Answer 2

Вы пытались явно установить положение ТД относительно?

Это должно сбросить позиционирование. На самом деле, это правильное поведение, которое вы получаете, и должно быть связано не только с TD, но вы знаете, браузеры - это весело.

Для получения подробной информации о том, почему вам нужно явно установить его, проверьте:
http://css -tricks.com / 791-абсолютное позиционирование внутри--относительное позиционирование /

..

Обновление:

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