为什么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

不知道答案，但为了避免这种情况，你可以使用像reset css / normalize css这样的东西。

http://cssreset.com

https://necolas.github.io/normalize.css

Answer 2

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