为什么仅在删除DOCTYPE时,我的div高度才能100%起作用?

为什么仅在删除DOCTYPE时,我的div高度才能100%起作用?,第1张

为什么仅在删除DOCTYPE时,我的div高度才能100%起作用? CSS
height
属性,百分比值和DOCTYPE

问题的 第一部分 询问如何对您的身高施加100%的高度

div
,其他人多次回答。本质上,在根元素上声明高度:

html { height: 100%; }

问题的 第二部分 受到的关注要少得多。我会尽力回答。

为什么去除

doctype
make(绿色背景)有效?

当您删除DOCTYPE(文档类型声明时,浏览器将从标准模式 切换为 怪异模式

怪癖模式也称为兼容模式)下,浏览器模拟一个旧的浏览器,以便它可以解析旧的网页-
在Web标准问世之前创作的页面。处于怪癖模式的浏览器伪装为IE4,IE5和Navigator4,因此它可以按作者期望的方式呈现旧代码。

下面是维基百科定义怪癖模式:

在计算中,“怪癖”模式是指某些Web浏览器为了保持与为较旧的浏览器设计的网页的向后兼容性而使用的技术,而不是严格遵循标准模式下的W3C和IETF标准。

这是MDN的举动:

在网络的早期,页面通常以两种版本编写:一种用于Netscape Navigator,另一种用于Microsoft Internet
Explorer。当W3C制定Web标准时,浏览器不能仅仅开始使用它们,因为这样做会破坏Web上大多数现有站点。因此,浏览器引入了两种模式,以区别于旧的旧站点对待符合新标准的站点。

现在,这是

height: 100%
代码中的代码在怪癖模式下而不在标准模式下工作的具体原因:

在标准模式下,如果父元素的

height:auto
高度(未定义高度),则子元素的百分比高度也将被视为
height:auto
按照规范]。

这就是为什么第一个问题的答案是

html { height: 100%; }

为了

height:100%
在中工作
div
,您必须
height
在父元素上设置一个更多详细信息。

但是,在怪癖模式下,如果父元素具有a

height: auto
,则将 相对于视口 测量子元素的高度百分比。


TL; DR

简而言之,这是开发人员需要了解的内容:

处于怪异模式的浏览器将以一种无法预测,不可靠且通常不受欢迎的方式呈现网页。因此,请 始终包括DOCTYPE
,以便文档以标准模式呈现。

选择正确的DOCTYPE过去是一个模棱两可且有些混乱的过程,许多DOCTYPE版本可供选择。但是今天的过程像以往一样简单。只需使用:

 <!DOCTYPE html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/4953981.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-13
下一篇 2022-11-13

发表评论

登录后才能评论

评论列表(0条)

保存