<DOCTYPE html>与<html> - 渲染问题firefox和chrome

Question

<DOCTYPE html>与<html> - 渲染问题firefox和chrome

一直在使用否DOCTYPE,而只是简单地<html>按照HTML5标准开始(据我所知).一切顺利.

开始使用Jade,坚持DOCTYPE.使用<!DOCTYPE html>- 页面不再正确呈现(？).

作为一个简单而琐碎的例子(firefox和chrome上的行为相同):

<html>
    <body >
        <div style='height:50%; background-color:pink;'></div>
        <div style='height:50%; background-color:blue;'></div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

渲染得很好 - 有粉红色,半蓝色

<!DOCTYPE html>
<html>
    <body >
        <div style='height:50%; background-color:pink;'></div>
        <div style='height:50%; background-color:blue;'></div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

呈现两个你看不到的瘦DIV.

这是怎么回事？
想法DOCTYPE被HTML5弃用了
我该怎么办？

Answer 1

Juk*_*ela 16

没有a DOCTYPE,页面将以Quirks模式呈现.这意味着几十个怪异.在我的Quirks Mode现象列表中遇到的是#3 :使用可用高度作为参考应用元素的百分比高度,即使封闭块具有height: auto(默认值); 根据规格,高度取决于内容的要求.
不,DOCTYPE根据HTML5草案不被弃用 - 相反,它是必需的,但除了<!DOCTYPE html>声明已过时的任何形式.
对于新页面,设计它们以"标准模式"(当然还有使用<!DOCTYPE html>)工作.对于旧页面,它取决于.

在给定的情况下,要使浏览器的渲染区域按预期方式划分,请设置html和body元素的高度,从而使百分比高度适用于体内元素,即使在"标准模式"中:

<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

Run Code Online (Sandbox Code Playgroud)

Answer 2

nav*_*een 15

谁告诉你这个DOCTYPE被弃用的人要么是对你恶作剧,要么是无知.

W3C在其文章从HTML4 HTML5差异的部分Syntax,分2.2节中明确指出这一点.

HTML5的HTML语法要求指定doctype以确保浏览器以标准模式呈现页面.doctype没有其他用途,因此对XML来说是可选的.具有XML媒体类型的文档始终以标准模式处理.[ DOCTYPE ]

doctype声明<!DOCTYPE html>在HTML语法中是且不区分大小写.早期版本的HTML中的Doctypes更长,因为HTML语言是基于SGML的,因此需要引用DTD.使用HTML5不再是这种情况,仅需要doctype来为使用HTML语法编写的文档启用标准模式.浏览器已经这样做了<!DOCTYPE html>.

至于,为什么<!DOCTYPE html>在你的例子中设置时的行为.

此行为是预期的.这是因为body是块级元素.因此,默认情况下,它在shrink-to-fit模型和宽度中具有高度,默认情况下,在expand-to-fit模型中.设置style="height:100%;"在body标签允许身体占据整个高度可用,并显示您的两个div.

归档时间：	13 年，3 月前
查看次数：	9168 次
最近记录：	13 年，3 月前