问题表达
就在我准备录制下一个视频系列的时候，在-Markdown工具页面下发现了一大片空白色。这是什么情况？我的第一反应可能是忘记在代码或预览窗口中添加overflow: auto，导致元素的整个长度被直接推送到元素流中。
原因分析
但是我看代码和接口的时候发现是对的，还不忘加上overflow: auto。而且我看body元素的时候发现高度是正常的，不包含空以下白色区域的高度。这个时候我感觉可能是Edge浏览器的Bug。所以我试了Chrome，Firefox，Safari，还有Linux和Windows的各种浏览器，都可以重现这个问题。确定不是浏览器Bug。
图2 - overflow: auto于是我又检查了一下html元素的高度，发现html的高度其实包含了空白色区域的高度。到这个时候，我就会确定元素流中一定有某个元素在浮动，而且这个元素一定是不可见的或者非常小的，所以我只能一个一个的检查出可能的元素。
图3 - html 高度我在排除故障的过程中发现，如果关闭预览或者不预览HTML渲染结果，那么只预览HTML代码就不存在空白的问题。可以确认Markdown的渲染结果有问题。但是渲染结果是由Markdown解析器生成的，增加了故障排除的难度。
图4 - 关闭预览这时我突然想起浏览器开发工具可以查看页面的3D结构。我看不出复合层有什么问题。但是当我看着3D DOM结构，把视频拉到底部的时候，我发现了问题——底部出现了几个东西。点击3D视图跳转到相应的dom结果。原来白页空的罪魁祸首是公式。
问题的原因
当我在Markdown中生成html时，我使用katex来呈现公式。默认情况下，它会生成两组DOM结构。一套mathml用于读屏软件或者搜索引擎识别这是公式，另一套是HTML，用于渲染显示我们看到的公式。
为了防止mathml和html同时显示，katex将mathml设置为position: absolute，只有一个像素大小。
问题出在position: absolute，因为我们的预览容器是overflow: auto。如果在可滚动容器中有一个绝对定位的元素，这个元素将离开容器，出现在主元素流中。也就是说，如果容器没有溢出和滚动，这个元素应该出现在哪里，有溢出和滚动的时候它还在那里。这就造成了它前面的空白。
解决办法
知道了问题的原因就好解决了。有三个方案稍有改动:
将katex生成的htmlAndMathml改为html。
换个位置:绝对的阶级。katex-mathml到位置:固定。
更改父类的位置。katex-mathml到非静态。
