Различия в отображении таблицы CSS - Chrome и Firefox

Question

Я недавно заметил, что мой сайт не работает в Chrome, несмотря на то, что он хорошо отображается в Firefox. Изучив HTML и CSS на моей странице -

http://www.designlagoon.com/what-we-do/

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

Если кто-то может пролить свет на то, что может быть причиной проблемы, я действительно ценю это!

Answer 1

Это связано с вопросом, который я отправил вчера: Firefox: неверная интерпретация модели коробки?

На самом деле, это Chrome, который ведет себя правильно: тд с высотой 150px + отступ 15px (x2) = 180px.

Firefox делает просчет при добавлении отступов к тд.

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

Answer 2

Спасибо за совет.Я попытался удалить padding из таблицы и т. Д. И вместо этого применить его к абзацу.Это до некоторой степени улучшило проблему, но у нас все еще остались разные границы в Firefox, IE и Chrome.

В конце мы решили полностью удалить таблицу и использовать вместо нее 4 плавающих столбца по 25%.Я буду избегать использования таблиц для любого макета сайта в будущем.Урок усвоен!