doctype влияет на ширину и высоту html / body / canvas - PullRequest
Новая
       5

doctype влияет на ширину и высоту html / body / canvas

2 голосов
/ 01 сентября 2011

У меня есть очень простой HTML-файл с холстом.Я реализовал функцию resizeToWindow, поэтому, если пользователь изменяет размер окна браузера, холст изменяет размер вместе с ним.

Однако в моем окне я получал полосы прокрутки.Я заметил небольшую белую область под холстом с моим рисунком, и когда я использовал инструмент проверки элементов, эта область, казалось, не соответствовала ни одному из элементов (html, body или canvas).Я попытался поиграться с кодом window.innerHeight и innerWidth, попытался поиграть с CSS, ничего ... а затем ...

Я удалил HTML-код! Doctype из верхней части моего кода, и он начал работать прекрасно.

Я пробовал это в: Safari, Chrome, Firefox и Opera, так что это не веб-комплект!

Мой HTML - это просто обычная голова HTML5, затем тело и холст, инициализированные до 800 x 600.

CSS это: 

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

и мой размерto window: 

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

Мне просто очень странно, что это не работает с типом документа, но работает без него.(Я бы ожидал, во всяком случае, чтобы оно было противоположным, поскольку эти свойства и этот код предположительно работают для режима стандартов во всех современных браузерах).

Любые идеи будут высоко оценены!

1 Ответ

3 голосов
/ 01 сентября 2011

Ах, интересно. Кажется, что элемент <canvas> по умолчанию имеет display:inline, как и элемент <img>, который, как я полагаю, имеет смысл. Это означает, что он расположен на базовой линии содержащего его блока, поэтому пробел в нижней части, который вы видите, является промежутком между базовой линией и нижней частью содержащего блока.

Это происходит только в режиме полных стандартов, поэтому удаление типа документа удаляет пустое пространство. В режиме почти стандартов и в режиме причуд элемент canvas размещается внизу содержащего блока.

Стандартные исправления для решения этой проблемы. Используйте либо: 

 canvas { vertical-align:bottom; }

или 

 canvas { display:block; }

и пробел и полоса прокрутки исчезнут.

...