如何在Chrome和Edge浏览器中设置类似IE的Document Mode？

Chrome、Edge等Chromium内核的现代浏览器没有提供和IE完全对等的Document Mode切换功能，IE Emulation下Document mode设为'5'对应的是IE5怪异渲染模式（Quirks Mode），页面UI重叠是现代浏览器默认渲染规则和旧IE5排版、盒模型逻辑不匹配导致的，可以根据实际需求选对应的处理方式：

短期过渡方案（无需大改代码，快速恢复可用） #

• 用Edge自带的IE模式访问：打开Edge的设置页，进入「默认浏览器」分类，将需要访问的旧站点添加到「Internet Explorer 模式页面」列表，重启Edge后访问该站点就会调用原生IE内核渲染，和之前在IE里设置文档模式的效果完全一致，适合内网老系统临时过渡使用。
• 如果不想用IE模式，可以先去掉页面顶部的<!DOCTYPE>声明触发浏览器的怪异渲染模式，同时全局补充CSS规则对齐IE5的盒模型计算逻辑：

/* 全局统一盒模型，对齐IE5下的尺寸计算规则 */
* {
  box-sizing: border-box;
}

这种方式能解决80%以上的布局重叠问题，但部分IE专属的CSS、JS逻辑还是会存在渲染差异。

长期适配方案（彻底兼容现代浏览器，适配后无需依赖IE） #

如果要彻底改造支持所有现代浏览器，需要逐点修正旧代码的非标准写法：

• 先排查所有CSS写法：IE5会自动给无单位的长度值补px单位，现代浏览器会直接判定为无效属性，要给所有width、height、margin、padding类的数值补上px单位；清理掉旧IE专属的CSS hack（比如_width、*+html这类仅IE识别的前缀/选择器）。
• 替换旧布局逻辑：旧页面很多用表格硬编码宽高、JS写死元素坐标实现排版，这类写法在不同渲染引擎下很容易出现偏移重叠，建议替换成标准的Flex、Grid布局重新实现排版，适配成本远低于逐点修正硬编码逻辑。
• 先引入基础CSS Reset统一所有元素的默认边距、字号：IE5下各标签的默认margin、padding和现代浏览器差异极大，统一默认样式后再逐模块核对UI对齐原有效果，能大幅减少调整工作量。

不建议使用各类JS模拟IE渲染的第三方库，这类库对旧IE渲染规则的还原度很低，反而会引入额外的兼容bug。

内容的提问来源于stack exchange，提问作者kal