Почему ячейки таблицы отображаются по-разному в разных браузерах?

Question

Вот скриншот, показывающий проблему:

Вот CSS, который я использую:

#board table {
    background: #eef0ff;
    border-spacing: 0px;
    border: 1px solid #475476;
}

#board td {
    height: 20px;
    width: 20px;
    border: 1px solid #cfd7ee;
}

Как я могу сделать клеткиодинаковый размер в разных браузерах?Кто-нибудь знает, почему Opera и Firefox затягивают клетки?

Answer 1

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

Сброс CSS (либо ваш, либосторонний) гарантирует, что все браузеры имеют одинаковую отправную точку в отношении стилей, поскольку разные браузеры не имеют одинаковые настройки стиля по умолчанию для разных элементов.

Кроме того, как говорит @thirtydot в егоответ , некоторые браузеры будут игнорировать высоту полностью пустой ячейки таблицы, например <td></td>.Чтобы это не игнорировалось, вы должны добавить некоторое содержимое в эти ячейки, хорошим выбором будет пробел без перерывов -  , таким образом: <td>&nbsp;</td>.

Answer 2

Ваши клетки все пусты, верно?<td></td>?

Одно исправление, которое наверняка сработает, это вставить   в каждую ячейку: <td>&nbsp;</td>.

Для некоторых других идей см .: Таблица CSS, проблема высоты ячейки таблицы в Firefox

Answer 3

Сначала сбросьте свойства HTML-кода по умолчанию, такие как padding, margin, height, width.etc .., затем примените свой стиль к работе

Лучше сбросить CSS - Эрик Майер