CSS таблица, проблема высоты ячейки таблицы в Firefox

Question

Для начала у меня есть примеры и код здесь (сайт, с которым я продолжаю играть). Это актуальная ссылка на всякий случай: http://www.williamrosmus.com/examples/calendar1_wf.html

У меня проблема именно с Firefox (я использую v3.6), и мне интересно, что происходит. Requonc показывает разумно, а IE8 отлично.

Для учебного упражнения я вручную создал календарь в формате xhtml, используя таблицы CSS, а не традиционные теги html. Я установил высоту и ширину для ячеек 100 на 100 пикселей. Однако верхний и нижний ряды, в которых некоторые ячейки пусты, в Firefox слишком высоки.

Любые предложения или комментарии о том, как это исправить, чтобы правильно отображать или что происходит с Firefox?

С уважением,

BillR

В дополнение к этому, согласно предложению Робина, я зарегистрировал это как ошибку на mozilla.org. Кто-то только что подтвердил это там. Если кому-то интересно:

https://bugzilla.mozilla.org/show_bug.cgi?id=634489

Answer 1

Просто вставьте   в пустые ячейки?

Я только что проверил, и это исправляет это в Firefox.

---

Я нашелстраница , которая немного больше рассказывает о проблеме, с которой вы столкнулись.

Она предлагает альтернативу CSS;table { empty-cells: show }, см .:

https://developer.mozilla.org/en/CSS/empty-cells

Однако в Firefox это не помогает с вашими <div> тегами с display: table-cell.

Answer 2

См. Обсуждение в https://bugzilla.mozilla.org/show_bug.cgi?id=634489 и https://bugzilla.mozilla.org/show_bug.cgi?id=569645 для получения дополнительной информации.(Однако использование «vertical-align: top» или «vertical-align: bottom» во всех ячейках таблицы должно быть разумным решением).

Answer 3

Я считаю, что это ошибка в Gecko. Я пролистал Bugzilla (https://bugzilla.mozilla.org/)), но не смог найти других людей, сообщающих об этом. Вероятно, стоит зарегистрировать ошибку с уменьшенным тестовым сценарием (или просто ссылкой в ​​вашем текущем), чтобы посмотреть, что разработчики там делают.

Что касается конкретного обходного пути, предложение тридцатки о  , вероятно, является лучшим выбором.

Answer 4

Когда я изменил ваше отображение div.calendar_day на «inline-block» или «block» вместо table-cell и добавил float: left высота была правильно отрисована.