DOCTYPE影響寬度和HTML /體/帆布

Question

我有一個帆布一個非常簡單的HTML文件的高度。我已經實現了resizeToWindow函數，因此如果用戶調整瀏覽器窗口大小，畫布會調整大小。

不過，我在我的窗口得到滾動條。我注意到一個白色的小面積，我的畫在畫布下方，當我使用的元素檢測工具，這方面似乎並沒有與任何元素（HTML，身體或帆布）的。我試圖搞亂window.innerHeight和innerWidth代碼，我試着玩CSS，什麼都沒有...然後...

我從我的代碼頂部刪除了！doctype html，它開始工作得很漂亮。

我已經在嘗試這樣做：Safari瀏覽器，Chrome瀏覽器，Firefox和Opera，所以它不是一個WebKit的事情！

我的HTML僅僅是平時的HTML5頭，然後主體和被初始化爲800×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; } 

和白色的空間和滾動條將不復存在。