Javascript doctype影响html/body/canvas的宽度和高度

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

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

我取下了那个！从我的代码顶部输入doctype html，它开始工作得很好

我在Safari、Chrome、Firefox和Opera中试过，所以它不是webkit的东西

我的HTML只是普通的HTML5头部，然后是一个主体和一个画布，初始化为800x600

CSS是：

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

和我的调整窗口大小：

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

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

---

任何想法都将不胜感激

啊，很有趣。似乎

元素在默认情况下具有

显示：inline

，就像我认为有意义的

元素一样。这意味着它被放置在其包含块的基线上，因此您看到的底部空白是基线和包含块底部之间的间隙

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

此问题的标准修复程序解决了此问题。使用以下任一选项：

 canvas { vertical-align:bottom; }

或

空白和滚动条将消失。

是的！谢谢：-）奇怪。。。非标准模式的神秘还在继续。那些日子一去不复返，我会很高兴的。

 canvas { display:block; }