为什么 Firefox 计算不正确的 div 尺寸？

Question

我有一个网页，其中包含由 div 组成的表格排列。在加载时，我使用 jQuery 根据可用空间计算最佳尺寸。它在其他浏览器中运行良好，但出于某种原因，Firefox 为某些 div 增加了高度。

我正在使用 Firefox 50.1.0 for Linux Mint - 1.0。它只有默认的附加组件和扩展。

这里是计算值...

...这里是呈现的 HTML，以及 HTML 文档的相关部分。

我完全不知道 Firefox 在哪里获得了额外的 18 像素高度。输出 jQuery 值表明正在计算正确的尺寸，并且它们出现在 HTML 中。谁能告诉我为什么会发生这种情况，以及如何阻止它？

这是为 div 计算的所有值..

border-bottom-color: rgb(77, 76, 75);
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: rgb(77, 76, 75);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(77, 76, 75);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(77, 76, 75);
border-top-style: solid;
border-top-width: 1px;
display: table-cell;
height: 59px;
width: 41px;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;

编辑

看起来它可能与显示值表及其变体有关。

布局是这样的……

<div style="display:table">
    <div style="display:table-row">
        <div style="display:table-cell"></div>
        <div style="display:table-cell"></div>
        ...etc
    </div>
    <div style="display:table-row">
        <div style="display:table-cell"></div>
        <div style="display:table-cell"></div>
        ...etc
    </div>
    ...etc
</div>

Answer 1

所以我最终找到了this 对近五年前提出的问题的回答。您需要在每个使用 display:table-cell 的 div 中添加一个  。