Question

我有一个非常简单的带有画布的HTML文件。我已经实现了resizeToWindow函数，因此如果用户调整浏览器窗口的大小，画布会随之调整大小。

但是，我的窗口中有滚动条。我注意到画布下面有一个小的白色区域和我的绘图，当我使用元素检查工具时，这个区域似乎与任何元素（html，body或canvas）都不对应。我试过搞乱window.innerHeight和innerWidth代码，我试着玩CSS，没什么......然后......

我从代码顶部删除了！doctype html，它开始工作得非常漂亮。

我试过这个：Safari，Chrome，Firefox和Opera，所以它不是webkit的东西！

我的HTML只是通常的HTML5头，然后是一个初始化为800 x 600的正文和画布。

CSS是：

html, body, canvas {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

我调整窗口大小：

function resizeToWindow() {
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
}

我觉得很奇怪，这不适用于doctype，但没有。（我希望，如果有的话，它是相反的，因为这些属性和这些代码应该适用于所有当前浏览器中的标准模式）。

任何想法都会非常感激！

Answer 1

有趣的是啊。看来<canvas>元素默认为display:inline，就像我认为有意义的<img>元素一样。这意味着它被放置在其包含块的基线上，因此您看到的底部的空白区域是基线和包含块底部之间的间隙。

这只发生在完全标准模式下，这就是为什么删除doctype会删除空白区域。在几乎标准模式和怪癖模式下，canvas元素放在包含块的底部。

此标准修复可解决此问题。使用：

 canvas { vertical-align:bottom; }

或

 canvas { display:block; }

并且空格和滚动条将消失。