doctype会影响html / body / canvas的宽度和高度 [英] doctype affects width and height of html/body/canvas

问题描述

我有一个非常简单的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％; 
身高：100％; 
 margin：0px; 
 padding：0px; 
} 
  

和我调整到窗口大小：

  function resizeToWindow（）{
 canvas.width = window.innerWidth; 
 canvas.height = window.innerHeight; 
} 
  

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

任何想法都可以非常感谢！

解决方案

有趣。看起来，< canvas> 元素默认具有 display：inline ，就像< img> 元素，我认为是有道理的。这意味着它被放置在其包含块的基线上，所以底部的空白区域就是基线和包含块底部之间的间隙。

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

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

  canvas {vertical-align：bottom; } 
  

或

  canvas {display：block; } 
  

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

I've got a very simple HTML file with a canvas. I've implemented a resizeToWindow function so if the user resizes the browser window, the canvas resizes with it.

However, I was getting scrollbars in my window. I noticed a small white area underneath the canvas with my drawing, and when I used the element inspection tool, this area didn't seem to correspond to any of the elements (html, body, or canvas). I tried messing with window.innerHeight and innerWidth code, I tried playing with CSS, nothing... and then...

I removed the !doctype html from the top of my code and it started working beautifully.

I've tried this in: Safari, Chrome, Firefox and Opera, so it's not a webkit thing!

My HTML is simply the usual HTML5 head, then a body and a canvas that is initialized to 800 x 600.

CSS is:

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

and my resize to window:

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

I just find it very odd that this doesn't work with the doctype, but does without. (I would expect, if anything, for it to be opposite, since these properties and this code supposedly works for standards mode in all current browsers).

Any ideas would be much appreciated!

解决方案

Ah interesting. It seems that the <canvas> element has, by default display:inline, like the <img> element which I suppose makes sense. This means that it is placed on the baseline of its containing block, so the white space at the bottom that you see is the gap between the baseline and the bottom of the containing block.

This only happens in full standards mode, so that's why removing the doctype removes the white space, In almost standards mode and quirks mode, the canvas element is placed at the bottom of the containing block.

The standard fixes for this resolve the problem. Use either:

 canvas { vertical-align:bottom; }

or

 canvas { display:block; } 

and the white space and scrollbar will be gone.

这篇关于doctype会影响html / body / canvas的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！