设置body左右auto margin后子页内容仍出现横向偏移如何解决

问题原因 #

你遇到的横向偏移是纵向滚动条占位导致的：

• 内容较短的「Test」文章页面高度不足以触发纵向滚动条，视口可用宽度为完整宽度
• 其他内容更长的文章会触发浏览器显示纵向滚动条，滚动条会占据约15-20px的视口宽度
• 你给body设置了margin: 0 auto居中规则，视口可用宽度变化后，body的居中计算基准改变，就会出现轻微的横向偏移。

解决方法 #

两种方案任选其一即可：

方案1：强制预留滚动条位置（兼容性好） #

给根元素<html>添加如下CSS，强制始终显示纵向滚动条的占位，避免宽度变化：

html {
  overflow-y: scroll;
}

缺点是内容不足一屏时，右侧也会显示灰色的禁用态滚动条。

方案2：使用现代CSS属性（更推荐） #

使用scrollbar-gutter属性预留滚动条位置，不会显示禁用态滚动条，适配所有场景：

html {
  scrollbar-gutter: stable;
}

该属性兼容Chrome 88+、Firefox 97+、Safari 15.4+，覆盖绝大多数桌面端用户。

内容的提问来源于stack exchange，提问作者sósperec