Chrome和Firefox之间计算的高度不同？答案

【问题标题】：Height being calculated different between Chrome and Firefox?Chrome和Firefox之间计算的高度不同？
【发布时间】：2012-07-12 16:41:07
【问题描述】：

所以看看 Chrome 和 Firefox 下的www.qualificationcheck.com。 Alt-tab 在他们之间快速来回切换，专注于那个绿色的“帮助和反馈”小标签。

它似乎在移动位置！这是为什么呢？

它包含在第 3 方 Javascript 文件中。我已经研究过它以弄清楚它是如何计算其位置的。

首先它设置top: 50% 使其在视口下方大约 50% 处。

然后设置

margin-top: [ "-",Math.round(tab.dimensions.height / 2), "px" ].join("")

即减去选项卡高度的一半，因此它会稍微向上移动，因此它的“中间”实际上是视口下方的 50%（而不是“顶部”）。

使用 Chrome 开发工具，然后在 Firefox 中使用 firebug，我可以看到在 Chrome 中 margin-top 最终为 -33px，而在 Firefox 中它最终为 -87px。

为什么不一样？

这很烦人，因为我想在其上方或下方添加自己的标签，但如果我不能始终依赖第 3 方标签，我无法确定将自己的标签放在哪里！

【问题讨论】：

【解决方案1】：

对不起，其他答案都没有帮助。

我通过基本上复制第 3 方 js 然后对其进行调整来解决这个问题，以便我可以将它和我的新标签放在一起。

所以基本上只是一种解决方法，而不是问题的答案。

【讨论】：

【解决方案2】：

尝试添加 padding-top: ?px 并且对于 Firefox 和 Chrome 应该是相同的。网络上的一些人报告了与margin-collapse 类似的问题（显然不是错误）：

【讨论】：

【解决方案3】：

Firefox（以及最近的 Chrome）以不同的方式解释边距和填充。 将边距和内边距值添加到 div 高度/宽度。您可以通过将其添加到您的 css（将其放在顶部）来解决此问题（至少对于 FF）：

DIV {
   -moz-box-sizing:border-box;
   box-sizing:border-box;
}

【讨论】：