一次doctype踩坑记录

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

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

怪异模式和标准模式

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。