Moh*_*n R 21 html css html5 doctype quirks-mode
这是整个代码:
<!DOCTYPE HTML>
<html>
<body style="height: 100%; padding: 0; margin: 0;">
<div style="background-color: green; height: 100%; width: 100%"></div>
</body>
</html>
什么也没出现.但是,如果我删除第一行(the doctype),则所有页面都是预期的绿色.
我有两个问题:
div在不删除标签的情况下填充页面？doctype它使它工作？Mic*_*l_B 42
height属性,百分比值和DOCTYPE你的问题的第一部分询问如何对你的身高施加100%的高度div已被其他人多次回答.基本上,在根元素上声明一个高度:
html { height: 100%; }
可在此处找到完整的说明:
问题的第二部分受到的关注较少.我会试着回答这个问题.
为什么删除
doctypemake [绿色背景]有效？
当您删除DOCTYPE(文档类型声明)时,浏览器会从标准模式切换到quirks模式.
在怪癖模式(也称为兼容模式)中,浏览器模拟旧浏览器,因此它可以解析旧网页 - 在Web标准出现之前编写的页面.怪癖模式的浏览器假装是IE4,IE5和Navigator 4,因此它可以呈现作者想要的旧代码.
以下是维基百科定义怪癖模式的方式:
在计算中,怪癖模式是指某些Web浏览器为了保持与为旧浏览器设计的网页的向后兼容性而使用的技术,而不是在标准模式下严格遵守W3C和IETF标准.
这是MDN的看法:
在Web的旧时代,页面通常用两个版本编写:一个用于Netscape Navigator,一个用于Microsoft Internet Explorer.当Web标准在W3C制作时,浏览器不能只是开始使用它们,因为这样做会破坏网络上的大多数现有网站.因此,浏览器引入了两种模式来处理符合新标准的站点,这与旧的旧站点不同.
现在,这是height: 100%您的代码在怪异模式下工作而不是在标准模式下工作的具体原因:
在标准模式下,如果父元素具有height: auto(未定义高度),则子元素的百分比高度也将被视为height: auto(根据规范).
这就是为什么你的第一个问题的答案是html { height: 100%; }.
要height: 100%在您的工作中工作div,您必须设置一个height父元素(更多细节).
但是,在quirks模式下,如果父元素具有a height: auto,则相对于视口测量子元素的百分比高度.
以下是三个涉及此行为的参考:
以下是开发人员需要简单了解的内容:
怪癖模式下的浏览器将以不可预测,不可靠且通常不合需要的方式呈现网页.因此,始终包含DOCTYPE,以便在标准模式下呈现文档.
选择正确的DOCTYPE过去是一个模糊且有些混乱的过程,有许多DOCTYPE版本可供选择.但今天这个过程就像以往一样简单.只需使用:
Run Code Online (Sandbox Code Playgroud)<!DOCTYPE html>
你的意思是垂直？div是块级元素,因此默认情况下它们会水平填充父级.
为了使其工作,您还需要为HTML标记提供100%的高度.
html, body { height:100%; }
请看这里的工作样本:
http://jsfiddle.net/uhg0y9tm/1/
正如其他一些人所说,一旦你删除第一行(HTML5 doctype),浏览器将以不同的方式呈现页面,在这种情况下,没有必要为HTML标记提供100%的显式高度.
您还必须将<html>and <body>标签的width和height设置为100％，因为在将the的width和height分配<div>为100％时，这意味着您正在为其分配其父元素的完整宽度和高度。区分的父元素的<div>是<body>和的父元素<body>IS <html>。
为什么删除
<!DOCTYPE html>标签后它可以工作？
因为当您删除<!DOCTYPE html>标签时，浏览器以不同的方式呈现页面，从而显示其他结果。
| 归档时间： |
|
| 查看次数： |
5360 次 |
| 最近记录： |