Doctype影响html/body/canvas的宽度和高度

doctype affects width and height of html/body/canvas

本文关键字：高度 canvas 影响 html body Doctype      更新时间：2023-09-26

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

然而，我得到滚动条在我的窗口。我注意到画布下面有一个小的白色区域，当我使用元素检查工具时，这个区域似乎与任何元素(html、body或canvas)都不对应。我试着摆弄窗户。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;
}

和我的大小调整到window:

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

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

任何想法将不胜感激!

啊，有意思。看起来<canvas>元素，默认有display:inline，就像<img>元素，我认为这是有意义的。这意味着它被放置在它的包含块的基线上，所以你看到的底部的空白是基线和包含块底部之间的间隙。

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

这个问题的标准修复程序解决了这个问题。使用:

 canvas { vertical-align:bottom; }

或

 canvas { display:block; }
相关文章：