Chrome上1px页溢出但不是firefox

Question

我有一个相当令人沮丧的问题，导致我的网络应用程序出现相当小故障。我的设计理念是它具有超级响应性，页面/文档不会滚动，但页面中的元素会滚动。结果我在很多div上有100％的高度。由于某种原因，我不知道为什么，Chrome已经确定100％实际上是= 100％+ 1px，但firefox没有问题。这1 px导致一个丑陋的滚动条出现在右侧，并导致页面在滚动包含元素时上下跳动。所以我想，很棒，只需计算（100％-1px），看看它是怎么回事。它修复了滚动条，但现在底部有1px的间隙。好像我无法获胜。它是1px到多或1px不够...... 我试过的任何方式：

• 删除所有行高
• 如上所述Calc 1px（.page-container）
• 从页面
中删除了所有引导程序字形
• 已禁用引导工具提示

注意：我注意到chrome，如果我清除缓存并且硬复位在滚动条出现之前有大约500ms的延迟，但我认为这可能是因为我的div css动画为100％？

以下是我的css文件的链接以及Chrome中的问题和在Firefox中工作的屏幕截图。

css-file-1

css-file-2

css-file-3

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

Answer 1

尝试设置：

box-sizing：border-box;

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

Answer 2

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