问题描述
当我这样做
<html>
<head>
</head>
<body>
<div style="width:100%;height:100%;background:blue;"></div>
</body>
</html>
div充满了窗口
但是如果我在开头添加doctype标记
but if i add a doctype tag at the beginning
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div style="width:100%;height:100%;background:blue;"></div>
</body>
</html>
div填充宽度，但不填充高度.
the div fills the width, but doesn't fill the height.
知道发生了什么吗?我知道我应该放入doctype标记，我只是想知道在这种情况下是不是造成了不同的行为.
Any idea what's going on? I know I'm supposed to put doctype tags, I'm just wondering specifically it's doing in this case thats causing the different behavior.
推荐答案
缺少doctype声明会触发怪癖模式"，这意味着浏览器在处理文档时会做不同的事情，假设该文档是可能依赖于该文档的旧代码.旧浏览器中已有的功能.粗略地说，怪癖模式"是指浏览器或多或少地尝试类似于Internet Explorer 4.我没有完整列出在怪癖模式"中发生的事情."Quirks模式"应仅用于需要它的旧版页面；相反，在怪癖模式"下工作的页面可能在标准模式"下瓦解，而您只需添加doctype声明即可到达该页面.
Lack of doctype declaration triggers "quirks mode," which means that browsers do different things to cope with the document, assuming it to be legacy code that may rely on features that existed in old browsers. Roughly speaking, "quirks mode" means that browser try to behave more or less like Internet Explorer 4. But they do it in different ways; I’ve composed an incomplete list of what happens in "quirks mode." "Quirks mode" should only be used for legacy pages that need it; conversely, pages that work in "quirks mode" may fall apart in "standards mode," and you get there just by adding a doctype declaration.
在您的情况下，跳过此处的理论部分，您需要添加一些规则以使div元素以标准模式"填充画布:
In your case, skipping the theory part here, you need to add some rules to make the div element fill the canvas in "standards mode":
<style>
head, body { height: 100%; margin: 0; padding: 0;}
</style>
和
<div style="width:100%;height:100%;background:blue; position: absolute;"></div>
这篇关于doctype对CSS的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！