doctype은 html/body/canvas의 너비와 높이에 영향을줍니다.

저는 캔버스가있는 아주 간단한 HTML 파일을 가지고 있습니다. resizeToWindow 함수를 구현 했으므로 사용자가 브라우저 윈도우의 크기를 조절하면 캔바스 크기가 조절됩니다.doctype은 html/body/canvas의 너비와 높이에 영향을줍니다.

그러나 내 창에 스크롤 막대가 나타납니다. 캔버스 아래에 작은 그림이 그려져 있고 도면 요소 검사 도구를 사용할 때이 영역이 요소 (html, body 또는 canvas)와 일치하지 않는 것 같습니다. 나는 window.innerHeight와 innerWidth 코드로 엉망이 되려고 노력했다. CSS로 놀아 보았는데, 아무 것도하지 않았다. 그리고 나서 ...

! Doctype html을 코드 상단에서 제거하여 아름답게 작동하기 시작했다.

사파리, 크롬, 파이어 폭스 및 오페라에서이 기능을 사용해 보았습니다. 따라서 웹킷이 아닙니다.

내 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 함께 작동하지 않는 매우 이상한 찾으십시오. (나는이 속성과이 코드가 현재의 모든 브라우저에서 표준 모드로 작동한다고 가정하기 때문에 그 반대 일 수 있습니다.

어떤 아이디어라도 높이 평가할 수 있습니다!

출처

2011-09-01 Elisabeth

재미 있습니다. <canvas> 요소는 기본적으로 display:inline이며, 내가 생각하는 요소 인 <img>과 같습니다. 즉, 포함하는 블록의 기준선에 배치된다는 것을 의미하므로 맨 아래에있는 공백은 기준선과 포함하는 블록의 아래쪽 사이의 간격입니다.

전체 표준 모드에서만 발생하므로 doctype을 제거하면 공백이 제거됩니다. 거의 표준 모드와 버크 모드에서는 캔버스 요소가 포함 된 블록의 맨 아래에 배치됩니다.

표준 수정으로 문제가 해결되었습니다. 사용 중 하나

canvas { vertical-align:bottom; }

또는

canvas { display:block; }

및 공백과 스크롤이 사라질 것입니다.

출처

2011-09-01 07:08:16 Alohci

예! 기묘한 ... 비표준 모드의 신비가 계속됩니다. 나는 그 시절이 지나면 기뻐할 것입니다. – Elisabeth

doctype은 html/body/canvas의 너비와 높이에 영향을줍니다.

답변

관련 문제