不写<!DOCTYPE html>后父元素未设置高度,子元素height:100%时,继承祖先元素高度

一、父元素未设置高度,子元素height:100%却拥有祖先的高度

1、问题描述

在排查内容超出容器后,滚动轴不出现但能进行滚动的问题时,发现在下面这个结构中,背景为red的div居然持有200px的高度 (在实际问题中,相当于滚动内容的父容器;height:100%是平台封装样式,不能随意修改)。

如下图所示:由于父容器没有设置高度,而高度不会默认继承,所以red的高度也应该为0px。

css 复制代码
<div style="height: 200px; background: pink;">
    <div>
        <div>
            <div style="height: 100%; background: red"></div>
        </div>
    </div>
</div>

而正常情况下,应该呈现的效果为

2、初见端倪

  • 开始一度以为是样式问题,故而一直盯着仅有的样式查看,属实排查不出来。并且在网上也没有查到类似问题,由于其他类似结构是正常的,于是开始在控制台对比多个相同结构html源文件。
  • 最后发现异常页面是由一个temp.html通过请求获取需要展示的html后,使用document.write方法写入的。而temp.html仅包含一个script标签:
temp.html 复制代码
<script>document.write('target html structure')<script>

document.write将目标html结构插入temp.html,最终会将上述script标签保留在结构中。

本以为是script标签阻塞样式加载的问题,在后面的测试中发现原来是<!DOCTYPE html>原因。

3、反思与总结

众所周知,"是为了向浏览器表明当前文档应该使用html5标准来解析"。

如果不写,或者少写都会导致浏览器以其他标准解析文档。

这也就是此次问题的根本原因。

归根结底,还是基础不牢,规则意识不强。

二、一点document.write的总结

说实话,document.write一直让我很疑惑。查资料,大家都说他会清空已打开文档的全部内容。那么打开这一词用什么代码去区别呢?

相比之下,MDN确实更显专业一些,说他会在已完成加载的文档调用时,清空所有内容。
加载一词很熟悉,让我想到了window.onload方法:它在文档资源加载完毕后使用。事实证明确实如此,将write放在onload中执行就会替换当前文档内容。

相关推荐
北海-cherish17 分钟前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909061 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist2 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师3 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang3 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_3 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含3 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端3 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友3 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端