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

Question

因此，请查看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 方标签，我无法确定将自己的标签放在哪里！

score 1 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

3 回答 3