表单元格在Firefox中的固定高度和边框问题 [英] Table cell fixed height and border issue in Firefox

问题描述

我有一个表显示一些数据，我需要表格单元格< td> 具有固定的高度和底部边框。问题是，Firefox正在渲染单元格的高度不同于Chrome或IE8。例如，我有以下css规则：

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在单元格定义的高度内渲染边框，因此它显示 34px height + 1px border 。 Chrome和IE会呈现完整的高度，并在其下方显示边框，以便显示 35px height + 1px border 。

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.

以下是 http://jsbin.com/oseqiz/9/ 问题的预览。 （在Firefox和Chrome / IE中打开它看到的区别）。

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

这是Firefox中的一个已知错误或是其他2个浏览器做错了。

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

我想指出，我不喜欢有额外的 < div> 在< td> 里面，就像我在上面的jsbin示例中的第二个表。

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 easily.

推荐答案

这个问题似乎已经解决了与最新版本的Firefox（此时是40版），高度和边框现在在所有提到的浏览器中一致地呈现。

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.

这篇关于表单元格在Firefox中的固定高度和边框问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！