gpt4 book ai didi

html - 与 - 呈现问题 firefox 和 chrome

转载 作者:技术小花猫 更新时间:2023-10-29 12:45:41 25 4
gpt4 key购买 nike

没有使用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>

渲染得很好 - 页面粉红色,一半蓝色

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

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

  1. 发生了什么事?
  2. 思想DOCTYPE已弃用 HTML5
  3. 我应该做什么?

最佳答案

不管是谁告诉你的DOCTYPE is deprecated 要么是在跟你开玩笑,要么就是无知。


W3C 关于其文章 HTML5 differences from HTML4Syntax 部分,第 2.2 小节明确说明了这一点。

The HTML syntax of HTML5 requires a doctype to be specified to ensure that the browser renders the page in standards mode. The doctype has no other purpose and is therefore optional for XML. Documents with an XML media type are always handled in standards mode. [DOCTYPE]

The doctype declaration is <!DOCTYPE html> and is case-insensitive in the HTML syntax. Doctypes from earlier versions of HTML were longer because the HTML language was SGML-based and therefore required a reference to a DTD. With HTML5 this is no longer the case and the doctype is only needed to enable standards mode for documents written using the HTML syntax. Browsers already do this for <!DOCTYPE html>.

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

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

关于html - <DOCTYPE html> 与 <html> - 呈现问题 firefox 和 chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12870294/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com