Img标签引发居中内容间距偏移问题排查求助

• 问题根源：
  你的首页内容高度没超过视口，浏览器不显示垂直滚动条；内页因为有图片，内容高度撑过了视口，触发了垂直滚动条。大部分浏览器会给带滚动条的页面预留出滚动条的宽度（一般17px左右），这就导致页面的可用视口宽度变小，原本设置margin: auto居中的内容块，会因为视口宽度变化而向左偏移，看起来就和首页有了错位。

• 快速修复方案：
  强制所有页面都显示垂直滚动条，不管内容高度够不够，这样所有页面的视口可用宽度保持一致，居中位置就不会变了。在全局CSS里加：

  html {
    overflow-y: scroll;
  }
  

• 更优雅的替代方案：
  用CSS的scrollbar-gutter属性，它会预留滚动条的宽度空间，没有滚动条时也不会显示灰色占位的滚动条，布局依然稳定。代码如下：

  html {
    scrollbar-gutter: stable;
  }
  

  这个属性在现代浏览器里都支持，体验比强制显示滚动条更好。

• 为什么调整图片宽度没用？
  问题根本不是图片宽度影响了容器，而是图片让页面高度超过视口触发了滚动条，改变了视口的可用宽度，导致margin: auto的计算基准改变，所以调图片宽度解决不了问题。

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