<！DOCTYPE html>防止相对高度 [英] <!DOCTYPE html> prevents relative css heights
问题描述
这个HTML代码创建了一个几乎充满屏幕的红色框：
< html>
< head>
< / head>
< body>
< div style =height：100％; background-color：red;>< / div>
< / body>
< / html>但是添加一个doctype声明会禁用相对高度，并使得div的高度为零：
$ b
<
$ b <！DOCTYPE html>
< html>
< head>
< / head>
< body>
< div style =height：100％; background-color：red;>< / div>
< / body>
< / html>
为什么？特别是，我不明白为什么浏览器会考虑没有doctype的文档的相对高度，因为它们在显式的html中没有。
解决方案 doctype强制执行浏览器的一组标准。如果一个页面不包括doctype，浏览器通常会使用某种怪异或过渡模式，这是更宽松的标记错误（但是不好的做法，可能会显示项目不正确）。
严格来说，您不能使用该浏览器的标准集将该元素设置为height 100％。如果您没有包含doctype或包含过渡字体，并相应地调整页面的样式，它会尝试预测您想要做什么。
(Everything is tested in the latest firefox.)
This html-code creates an almost screen-filling red box:
<html>
<head>
</head>
<body>
<div style="height:100%;background-color:red;"></div>
</body>
</html>
But adding a doctype declaration disables relative heights and makes the div's height zero:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="height:100%;background-color:red;"></div>
</body>
</html>
Why is this? In particular, I don't get why browsers consider relative heights in a document without doctype, since they don't in explicit html ones.
解决方案 A doctype enforces a certain set of standards for the browser. If a page does not include a doctype, browsers will usually use some kind of quirks or transitional mode, which is more lenient about markup mistakes (but is bad practice and may display items incorrectly).
Essentially, strictly speaking, you can't set that element to height 100% using that browser's set of standards. It'll try to predict what you wanted to do if you don't include a doctype or include a transitional one and adjust the page's styling accordingly.
这篇关于<！DOCTYPE html>防止相对高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
