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

Height being calculated different between Chrome and Firefox?

本文关键字：高度计 计算 高度 Firefox 之间 Chrome      更新时间：2023-09-26

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

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

它包含在第三方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 方选项卡始终处于同一位置，我无法确定将自己的选项卡放在哪里！

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

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

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

尝试添加padding-top： ？px，Firefox和Chrome应该是一样的。 网络上的一些人报告了类似的保证金崩溃问题（显然不是错误）：

http://www.sitepoint.com/forums/showthread.php?829681-CSS-margins-displaying-differently-on-Firefox-Ie-Chrome

Firefox 和 Chrome/Safari 之间的边距差异

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

DIV {
   -moz-box-sizing:border-box;
   box-sizing:border-box;
}
相关文章：