Firefox下100%高度Canvas显示垂直滚动条问题求助（Chrome/Safari无此现象）

这其实不是浏览器Bug，而是不同浏览器对替换元素（比如canvas）默认布局规则的细微差异导致的，咱们来一步步拆解原因和修复方案：

问题根源 #

<canvas>属于替换元素，默认带有inline-block的布局特性。在Firefox中，当你给它设置width: 100%; height: 100%;时，浏览器会保留行内元素基线对齐的微小间距（也就是常说的“幽灵空白节点”带来的额外空间），这一点点高度就触发了垂直滚动条。而Chrome在处理这类100%宽高的替换元素时，自动忽略了这个间距，所以没有出现滚动条。

修复方案 #

方案1：将Canvas设置为块级元素（推荐） #

给canvas添加display: block，彻底消除行内元素的基线间距问题，这是最直接且标准的解决方案：

html, body, canvas {
  border: none;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  display: block; /* 关键新增属性 */
}

方案2：调整Canvas的垂直对齐方式 #

如果不想修改display属性，也可以通过设置vertical-align来消除基线间距：

canvas {
  vertical-align: top; /* 或middle、bottom都可以 */
}

方案3：隐藏Body的溢出空间（不推荐） #

这个方法只是隐藏滚动条，并没有真正解决多余空间的问题，仅作为临时替代方案：

body {
  overflow: hidden;
}

验证一下：使用方案1或2后，Firefox和Chrome都会一致地让Canvas铺满整个视口，且不会出现垂直滚动条。

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