div с фиксированной высотой внутри ячейки

[graf]

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

Для достижения эффекта заворачиваю внутри каждой ячейки div с фиксированной высотой. По идее все что внутри дива должно обрезаться, и на высоту ячейки никак не влиять,

и тем не менее почему-то высота ячейки меняется в зависимости от контента внутри дива. Проверял в IE FF и Chrome.

Нигде не могу найти обьяснения почему так происходит.

<tr style="display: table-row;">
    <td style="height: 24px; min-height: 24px; max-height: 24px; overflow: hidden;">
        <div class="ecl-grid-cell-inner ecl-border-box" style="overflow: hidden; position: relative; height: 24px; max-height: 24px;">AB2 </div>
    </td>
    <td style="height: 24px; min-height: 24px; max-height: 24px; overflow: hidden;">
        <div class="ecl-grid-cell-inner ecl-border-box" style="overflow: hidden; position: relative; height: 24px; max-height: 24px;"> </div>
    </td>
    <td style="height: 24px; min-height: 24px; max-height: 24px; overflow: hidden;">
        <div class="ecl-grid-cell-inner ecl-border-box" style="overflow: hidden; position: relative; height: 24px; max-height: 24px;">null</div>
    </td>
    <td style="height: 24px; min-height: 24px; max-height: 24px; overflow: hidden;">
        <div class="ecl-grid-cell-inner ecl-border-box" style="overflow: hidden; position: relative; height: 24px; max-height: 24px;">
              <button class="defaultButton ecl-border-box" data-submitbutton="false">My button</button>
        </div>
    </td>
</tr>

Edited May 7, 2013 by graf

[red4pony]

Посмотрите на это: http://jsfiddle.net/zB2Pe/

[Kray Storm]

и тем не менее почему-то высота ячейки меняется в зависимости от контента внутри дива

И где она меняется?

http://jsfiddle.net/Spc2Q/

[graf]

Всем спасибо, проблема была решена через указывание ячейкам vertical-align: top