在Windows平台的Firefox中，如果页面内容刚好从不足一屏变成超过一屏，垂直滚动条的出现会让可用宽度瞬间减少十几像素。对于使用百分比宽度、弹性布局或自动居中的页面来说，这十几像素会造成明显的横向抖动：导航按钮偏移、卡片错位、居中的标题看起来偏左。这种差异本质上是滚动条空间占用策略不同造成的。
滚动条空间占用的底层差异
浏览器处理滚动条的方式可以分成两类。第一类叫经典滚动条，也叫非覆盖式滚动条，它会在文档流中占据独立的宽度。Windows平台上的Firefox、Chrome以及部分Linux桌面环境默认使用这种模式。第二类叫覆盖式滚动条，滚动条悬浮在内容上方，不参与布局计算，macOS系统和部分触屏设备采用这种方式。
在经典滚动条模式下，当内容高度不足以产生滚动时，滚动条不可见，对应宽度也不会被占用。一旦内容超出容器，滚动条出现，可视区域宽度立刻减少。减少的宽度由系统和浏览器决定：Windows上通常是12px到17px，Firefox可以通过scrollbar-width: thin将其变窄。开发者在Chrome中调试时可能没有察觉到这个问题，因为Chrome较新的版本对scrollbar-gutter的默认处理相对友好，而Firefox的经典滚动条在动态内容增多时变化更直接。
Firefox在Windows上默认不会预先给垂直滚动条留出空位。如果布局完全依靠vw单位，或者某个容器宽度设置成100%，滚动条出现后内容区域的实际可用宽度会减少，但容器仍按原来的包含块宽度参与计算，于是内部元素被压缩。这就是很多前端项目只在Firefox中出现错位的原因。
使用scrollbar-gutter稳定预留空间
scrollbar-gutter是专门用来控制滚动条槽位空间的CSS属性。它可以让浏览器在滚动条出现之前就预留出对应区域，避免布局发生位移。属性值stable表示无论是否出现滚动条，都保留滚动条的槽位；auto则是经典行为，只有滚动条出现时才占用空间。把scrollbar-gutter: stable设置在根元素<html>上，通常可以一次性解决Firefox的布局抖动。
html {
scrollbar-gutter: stable;
}
还需要区分滚动条本身和滚动条槽位。默认情况下，滚动条槽位位于内容框和边框之间，当滚动条不出现时，stable会保留空白，但不会强制绘制滚动条。如果希望两侧对称，可以使用stable both-edges，这样在内容左右两侧都预留空间。对于居中布局，both-edges可以避免因为一侧预留空间而造成的视觉偏移。
html {
scrollbar-gutter: stable both-edges;
}
需要注意的是，scrollbar-gutter的浏览器支持已经比较广泛，但在部分旧版Safari中仍可能不生效。如果你的项目需要兼容较老的移动端浏览器，建议同时准备回退方案。一个简单做法是给<html>增加overflow-y: scroll，强制滚动条常驻，这样也能保证宽度不发生变化，但缺点是页面在不需要滚动时也会显示一条灰色滚动条。
兼容旧浏览器的回退方案
如果不使用scrollbar-gutter，可以使用CSS特性检测来提供降级处理。下面的代码优先使用scrollbar-gutter: stable，在不支持的环境中则通过overflow-y: scroll让垂直滚动条始终显示。这样虽然牺牲了一点视觉整洁度，但保证了内容宽度稳定。
html {
scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
html {
overflow-y: scroll;
}
}
还有一种做法是手动预留宽度。比如Windows下滚动条宽度通常为17px，可以给容器设置padding-right: 17px或使用calc(100% - 17px)。但这种方式依赖具体操作系统和浏览器，一旦用户在macOS上查看，覆盖式滚动条并不占用空间，预留的17px反而会让内容白边过宽。因此手动预留宽度只适合内部管理系统这类固定环境，不建议作为通用方案。
除了根元素之外，如果页面上存在独立的滚动容器，比如侧边栏和表格区域，也应该对它们设置scrollbar-gutter: stable。局部滚动容器在数据加载后出现滚动条时，同样会引起容器内部宽度变化。对于使用display: flex和justify-content: space-between的横向布局，这种变化会破坏间距计算。
100vw溢出与自定义滚动条的配合
在解决滚动条布局问题时，另一个容易踩坑的地方是100vw。视口宽度单位vw在大多数桌面浏览器中包含了滚动条的宽度。也就是说，当页面出现垂直滚动条时，width: 100vw的元素实际宽度会比HTML根元素的可视宽度多出十几像素，导致水平溢出。Firefox中这个现象同样存在。若页面既要处理垂直滚动条抖动，又要避免横向溢出，可以把全宽元素改成width: 100%，或者在根元素上配合overflow-x: hidden，但后者只是掩盖溢出，并不能修正布局尺寸。
/* 避免使用 width: 100vw 作为全容器宽度 */
.page {
width: 100%;
/* 不要使用 width: 100vw; */
}
如果项目使用了自定义滚动条样式，例如通过scrollbar-width: thin或WebKit的::-webkit-scrollbar伪元素美化滚动条，需要确认滚动条是否仍然占用布局空间。Firefox的scrollbar-width: thin会生成更窄的经典滚动条，它依然参与布局，只是宽度变小。scrollbar-gutter: stable同样适用于这种情况，但预留的槽位宽度会跟随实际滚动条宽度变化。对于完全自定义的覆盖式滚动条方案，比如使用JavaScript模拟滚动条并且将原生滚动条隐藏，则需要手动给容器增加内边距，否则滚动条会遮挡最后一列内容。
实际开发中，可以先在Windows和Linux的Firefox里验证滚动条出现前后的容器宽度变化。打开开发者工具，把窗口高度从大到小拖动，观察document.documentElement.clientWidth是否变化。如果数值减少，说明滚动条正在占用空间。此时优先引入scrollbar-gutter: stable，而不是简单依赖overflow-y: scroll或手动像素补偿，因为前者语义更明确，维护成本更低。
Firefox滚动条scrollbar-gutter布局偏移修改时间：2026-09-24 01:55:52