1px 页面在 chrome 上溢出，但不是 firefox答案

【问题标题】：1px page overflow on chrome but not firefox1px 页面在 chrome 上溢出，但不是 firefox
【发布时间】：2014-12-26 16:22:17
【问题描述】：

我有一个相当令人沮丧的问题，它导致我的网络应用程序出现故障。我的设计理念是它具有超级响应性，并且页面/文档不会滚动，但页面中的元素会滚动。结果，我在很多 div 上都有 100% 的高度。出于某种原因，我不知道为什么，chrome 已经决定 100% 实际上 = 到 100% + 1px，但是 firefox 没有问题。这 1 px 会导致右侧出现丑陋的滚动条，并在滚动包含元素时导致页面上下跳跃。所以我想，太好了，让我们 calc(100% -1px) 看看它是怎么回事。好吧，它修复了滚动条，但现在我们在底部有 1px 的间隙。好像赢不了它要么是 1px 多，要么是 1px 不够...... 我尝试过的任何方式：

删除所有行高
如上所述计算 1px (.page-container)
从页面中删除了所有引导字形图标
禁用引导工具提示

注意：我注意到在 chrome 上，如果我清除缓存并硬重置，在滚动条出现之前会有大约 500 毫秒的延迟，但我认为这可能是因为我的 div css 动画为 100%？

这里是我的 css 文件的链接，以及在 chrome 中和在 Firefox 中工作的问题的屏幕截图。

css-file-1

css-file-2

css-file-3

如果需要，我很乐意将整个网站上传到我的服务器。私信给我链接。谢谢！

【问题讨论】：

标签： css google-chrome firefox overflow

【解决方案1】：

原来“textAngular”是一个与我们的 Angular SPA 集成的 html 编辑器，它在页面底部放置了一个 1px 高的输入，其 ID 为：textAngular-editableFix-010203040506070809。我只是将它的高度设置为 0px，walla 问题就解决了。还是要谢谢你的帮助。希望这可以帮助其他可能遇到此问题的人！

【讨论】：

【解决方案2】：

尝试设置：

box-sizing:border-box;

在您希望高度为 100% 的所有项目上。如果这不起作用，请在清除缓存并重新加载页面后尝试找出加载时间最长的元素，并找出该元素是否有问题。

【讨论】：

关于您答案的第二部分，有没有办法使用 chrome inspect 元素查看元素的加载时间？实现您所建议的最佳方式是什么？回到办公室后，我将查看 box-sizing:border-box。从那以后我注意到 Firefox 似乎是异常的，因为 iPad 和 android 平板电脑也都显示 1px 底部！
检查 Chrome 检查器中的“网络”选项卡。它应该向您显示所有资产的加载时间。 box-sizing 解决了吗？