ТД таблицы с указанной высотой не работает одинаково в разных браузерах

Question

У меня есть таблица, и мне нужно, чтобы каждая ячейка имела одинаковую фиксированную высоту и ширину.

Итак, у меня есть:

th, td {
    min-width: 110px;
    width: 110px;
    max-width: 110px;
    min-height: 60px;
    height: 60px;
    max-height: 60px;
}

тд это просто:

<td><span>*number*</span></td>

Я тестировал свой код на Firefox 7 и увидел, что они в порядке, но в Chrome / IE9 клетки выше.

Итак:

С минимальной или без высоты, высота:

FF7: 56px / 60px (без границ / с границами) Chrome: 62px / 66px IE9: 61px / 65px

Проблема в том, что я сделал фон для ТД в Фотошопе, и это выглядит странно, если размер не правильный, и я не знаю, как его решить.

Помимо этой проблемы, хром ведет себя странно. Я применяю через Javascript некоторые a к некоторым td, как только страница загружена, и они не работают на chrome ... пока вы не обновите иногда.

РЕДАКТИРОВАТЬ : таблица имеет фиксированную высоту и некоторый интервал границы.

РЕДАКТИРОВАТЬ 2 : Я сделал jsFiddle: http://jsfiddle.net/cFTpp/1/ Разница меньше (58vs60), но все еще отличается.

Answer 1

Пожалуйста, проверьте следующие коды.

<table border="0" align="center" cellpadding="0" cellspacing="0" style="width:800px;">
    <colgroup>
        <col  style="width:200px; background:#CCC"/>
        <col  style="width:100px; background: #666"/>
        <col  style="width:500px; background: #000"/>
    </colgroup>
    <thead>
      <tr>
        <th style="height:100px">head</th>
        <th style="height:100px">&nbsp;</th>
        <th style="height:100px">&nbsp;</th>
      </tr>
    </thead> 
    <tfoot> 
      <tr>
        <td>foot</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tfoot> 
    <tbody>
      <tr>
        <td>body</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tbody>

Вы можете настроить ширину любого столбца, изменив ширину <col style="width:200px;. Я просто пишу встроенные стили.

Answer 2

Я закончил изменять таблицу для divs, некоторые результаты стали проще архивировать.

Answer 3

Использовать фиксированный макет таблицы:

table { table-layout: fixed; }