如何使用CSS将站点最大宽度设为指定百分比及解决内容左移问题

结合CSS默认规则和浏览器渲染逻辑，这个偏移现象来自两个可复现的机制：

• 浏览器内置默认样式的计算偏差
  所有现代浏览器默认给body元素设置margin: 8px的内置边距，会默认把页内所有块级内容向右、向下推开8px。当页面内容高度超过视口、出现垂直滚动条时，不同浏览器对body的宽度计算逻辑会出现分歧：
  部分浏览器计算body宽度时，会把垂直滚动条占据的宽度纳入计算范围，此时body的实际宽度 = 视口全宽（含滚动条占位），而非扣除滚动条后的实际可视内容区宽度。你设置的#sirka容器的max-width:80%是相对于父级body的宽度计算的，因为body的计算宽度比可视区宽出了一整条滚动条的宽度，容器整体位置就会比预期更靠左，同时右侧会露出未被灰色背景覆盖的区域，形成明显的左移观感。
• 手动指定宽度后的计算规则收敛
  当你主动给html、body设置width:100%时，body的宽度计算会被强制绑定到根元素的可视内容区宽度（也就是已经扣除滚动条占位的实际可用宽度），此时不管页面有没有垂直滚动条，#sirka容器的80%最大宽度的计算基准是完全统一的，自然不会出现基准漂移带来的偏移。

不需要强制给body绑定100%宽度，调整两个配置就能从根源避免偏移问题：

• 在全局样式最开头加入全局重置代码，清掉浏览器自带的默认边距、内边距和怪异盒模型：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

• 调整#sirka容器的样式，降低父级宽度变化带来的影响，实现稳定居中：

  #sirka {
    max-width: 1200px; /* 固定适配的最大内容宽度，替代容易受父级宽度波动影响的80%百分比 */
    margin: 0 auto; /* 自动分配左右边距，保证容器在页面水平居中，不会出现左移问题 */
  }
  

顺带修正现有代码里的无效属性：

• font-color: white 是不存在的CSS属性，设置文字颜色直接用color: white即可，重复声明不会生效
• font-style: none 是无效值，font-style的合法取值只有normal/italic/oblique，如果要移除元素默认斜体效果，应该写font-style: normal

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