Firefox Dev Tools显示body溢出问题求助（无样式生效）

• Firefox DevTools工具栏会改变视口高度，当带!important轮廓的footer这类元素的视觉高度刚好处于视口临界值时，浏览器布局计算会出现偏差：开启DevTools时视口变矮，轮廓被截断，不会触发溢出；关闭后视口变高，轮廓完全显示但超出body的计算高度，导致溢出提示出现。
• 滚动到底部再刷新时，Firefox会基于当前滚动位置重新计算布局，临时修正了溢出判断，但这只是临时现象，根源还是布局计算的临界值冲突。
• 清空style.css仍有问题，说明问题可能来自浏览器默认样式、第三方扩展注入的样式，或是页面动态生成的元素/样式。

• 处理footer的轮廓：
  • 给footer添加outline-offset: 0，确保轮廓不会超出元素本身的布局范围；
  • 或者把outline替换成box-shadow（比如box-shadow: 0 0 0 2px red !important），Firefox对box-shadow的布局计算更稳定，不会触发溢出误判；
  • 如果不需要轮廓的非占位特性，直接用border代替（比如border-bottom: 2px solid red !important），border会占据布局空间，浏览器能正确计算高度。
• 强制修正body布局：
  给body设置以下样式，覆盖浏览器默认样式并强制正确计算高度：

  body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  

• 排查第三方干扰：
  • 禁用Firefox所有扩展，重启浏览器后测试，排除扩展注入样式导致的问题；
  • 检查页面是否有JS动态生成的元素，比如异步加载的内容，确认这些元素的高度是否会导致布局溢出。
• 检查视口设置：
  确保页面头部的视口元标签正确设置，避免响应式布局下的视口计算错误：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

内容的提问来源于stack exchange，提问作者Mike Kelso