一次doctype踩坑记录

在学习图片懒加载几个版本的实现对比的时候,自己写个例子:代码 发现document.documentElement.clientHeight拿到的高度居然很高,不是视窗可视区域的高度,而是所有item之和的高度。

html节点的clientHeight跟scrollHeight居然都是1000,body的clientHeight为874,scrollHeight为10000 既然滚动条在body这层,那么html节点就不应该有那么高,应该是874左右才对。翻看了几个站点,比如掘金,发现滚动条都在html节点这层,html节点的clientHeight就是视窗的可视区域高度,远小于scrollHeight,看看其css设置发现并没有特殊之处。第二天才注意到头部的加上后果然,滚动条就是在html节点,html节点的clientHeight就是视窗的高度。我用的是chrome,从结果反推回去chrome默认使用的并不是文档模式的标准模式。所以切记写HTML的时候头部加上文档类型的声明。引用mdn说的:范例中的DOCTYPE,,是所有可用的 DOCTYPE 之中最简单的,也是 HTML5 所推荐的

怪异模式和标准模式

你可能感兴趣的:(一次doctype踩坑记录)