页面仅普通浏览器出现水平滚动条？火狐开发者工具无该问题

问题根源 #

导致水平滚动条的核心原因有2个：

1. .container 类使用 width: 100vw 定义宽度：100vw 会计算包含垂直滚动条在内的整个视口宽度，普通浏览模式下页面出现垂直滚动条时，100vw 的元素宽度会超出实际可用可视区域，触发水平溢出。Firefox响应式调试面板的滚动条默认是悬浮不占位的，所以调试时不会触发该问题。
2. 图片尺寸未做响应式限制：.whytho-content img 固定使用 width:70vh，当视口高度较高时，图片宽度会超出父容器宽度，导致溢出。

修复方案 #

按以下步骤修改CSS代码即可：

1. 修改.container的宽度属性：

.container {
  display: grid;
  line-height: 1.7;
  width: 100%; /* 替换原有的100vw */
}

2. 优化图片的响应式适配：

.whytho-content img {
  align-self: center;
  max-height: 70vh; /* 替换原有的height:70vh */
  width: auto; /* 替换原有的width:70vh */
  max-width: 100%; /* 新增，保证图片宽度不超出父容器 */
  object-fit: contain; /* 替换原有的initial，保证图片比例正常 */
}

3. 新增全局水平溢出隐藏，避免其他元素意外溢出：

html, body {
  overflow-x: hidden;
}

4. 删除媒体查询中冗余的width:100vw配置：

@media screen and (max-width: 1000px) {
  a:link,
  a:visited {
    font-size: calc(1rem + 1vw);
  }
  /* 删掉原有的section#whytho width:100vw规则 */
}

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