Фиксированная высота ячейки таблицы и проблема с границами в Firefox

Question

У меня есть таблица, отображающая некоторые данные, и мне нужна ячейка таблицы <td>, чтобы иметь фиксированную высоту и нижнюю границу.Проблема в том, что Firefox отображает высоту ячейки не так, как Chrome или IE8.Например, у меня есть следующие правила CSS:

table {
    width: 100%;
    border-collapse: collapse;
}

table td {
    height: 35px;
    border-bottom: 1px solid #000;
}

Firefox отображает границу внутри определенной высоты ячейки, поэтому он показывает 34px height + 1px border.Однако Chrome и IE отображают полную высоту и отображают границу снаружи / ниже, поэтому на ней отображается 35px height + 1px border.

Вот предварительный просмотр проблемы http://jsbin.com/oseqiz/9/. (откройте ее в Firefox и ChromeIE, чтобы увидеть разницу).

Это известная ошибка в Firefox или два других браузера делают что-то неправильно.Если так, есть ли какое-то исправление для этого?

Я хотел бы отметить, что мне не нравится иметь дополнительные <div> внутри <td>, как я сделал для второго столав приведенном выше примере jsbin.Я реализовал это так, чтобы проблема рендеринга была легко видна.

Answer 1

Эта проблема, похоже, была исправлена ​​в последней версии Firefox (которая на данный момент является версией 40), а высота и граница теперь отображаются единообразно во всех упомянутых браузерах.

Answer 2

Хорошо, пожалуйста, прочитайте это

Размер окна css не влияет на блочную модель

Обходным путем может быть установка

td
{
display: inline-block;
}

А чем пользуетесь

td
{
box-sizing: content-box;
}

Для кросс-браузерной высоты <td>