<html>
标签时起作用?由于删除了<!DOCTYPE html>
标签,浏览器以不同的方式呈现页面,显示其他结果。
这是完整的代码:
<!DOCTYPE HTML>
<html>
<body style="height: 100%; padding: 0; margin: 0;">
<div style="background-color: green; height: 100%; width: 100%"></div>
</body>
</html>
没有任何显示。但是,如果我删除第一行(doctype
),则所有页面都按预期是绿色。
我有两个问题:
div
填充页面而不删除该标签?doctype
使其起作用? height
属性,百分比值和DOCTYPEdiv
应用100%的高度。本质上,在根元素上声明高度:html { height: 100%; }
可以在这里找到完整的说明:
为什么删除height
会使[绿色背景]起作用?
doctype
)时,浏览器从标准模式切换为
快速模式。
在document type declaration中,也称为quirks mode,浏览器模拟了一个旧的浏览器,因此它可以解析旧的网页-在Web标准问世之前创作的页面。处于怪癖模式的浏览器假装为compatibility mode,IE4,因此它可以按作者预期的方式呈现旧代码。IE5 and Navigator 4如何定义怪癖模式:
[在计算中,怪癖模式是指某些网络使用的技术浏览器,以保持与Web的向后兼容性专为旧版浏览器设计的页面,而不是严格遵守标准模式下的W3C和IETF标准。Wikipedia的拍摄:
[在网络的过去,页面通常以两部分的形式编写版本:一个用于Netscape Navigator,一个用于Microsoft Internet资源管理器。在W3C制定Web标准时,浏览器无法刚开始使用它们,因为这样做会破坏网站上大多数现有的网站网络。因此,浏览器引入了两种模式来处理新符合标准的网站与旧的旧网站有所不同。
现在,这是代码中的MDN在怪癖模式下而不在标准模式下工作的特定原因:
在height: 100%
中,如果父元素具有standards mode(未定义高度),则子元素的百分比高度也将被视为height: auto
(height: auto
)。
这就是为什么第一个问题的答案是as per the spec。
要使html { height: 100%; }
在height: 100%
中工作,必须在父元素(div
)上设置height
。但是,在怪异模式下,如果父元素具有more details,则子元素的百分比高度将被测量相对于视口
。以下是涉及此行为的三个参考资料:
height: auto
选择正确的DOCTYPE以前是模棱两可的与standards mode混淆的过程。但今天的过程像以往一样简单。只需使用:
many DOCTYPE versions to choose from
html, body { height:100%; }
如此处其他人所述,一旦删除第一行(HTML5 doctype),浏览器将以不同的方式呈现页面,在这种情况下,不必将HTML标记的显式高度设置为100 %。
您还必须将html {
height:100%;
}
和<html>
标签的宽度和高度设置为100%,因为当您将<body>
的宽度和高度分配为100%时,这意味着您正在为其分配其父元素的完整宽度和高度,在这种情况下,<div>
的父元素为<div>
,<body>
的父元素为<body>
。
为什么我删除<html>
标签时起作用?由于删除了
<!DOCTYPE html>
标签,浏览器以不同的方式呈现页面,显示其他结果。您需要将html和body标签的高度设置为100%才能填充页面。
css:
<!DOCTYPE html>
<html>
标签时起作用?由于删除了<!DOCTYPE html>
标签,浏览器以不同的方式呈现页面,显示其他结果。