Table cell fixed height and border issue in Firefox

I have a table displaying some data and I need the table cell <td> to have a fixed height and a bottom border. The problem is that Firefox is rendering the cell height differently than Chrome or IE8. For example I have the following css rules:

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

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

Firefox renders the border inside the cell defined height so it shows 34px height + 1px border. Chrome and IE however render the full height and display the border outside/below that so it shows 35px height + 1px border.

Here's a preview of the issue http://jsbin.com/oseqiz/9/. (open it in both Firefox and Chrome/IE to see the difference).

Is this a known bug in Firefox or are the 2 other browsers doing things incorrectly. If so, is there any fix for it?

I'd like to point out that I don't like having the extra <div> inside the <td> like I did for the second table in the above jsbin example. I implemented it like that so the rendering issue can be seen easil开发者_如何学运维y.

Ok, please read this

css property box-sizing has no effect on the box model

A workaround could be, is to set

td
{
display: inline-block;
}

And than use

td
{
box-sizing: content-box;
}

For a cross-browser same height <td>

This issue seems to have been fixed with the latest version of Firefox (which at this time is version 40), and the height and border is now rendered consistently within all the mentioned browsers.