结论是：90%以上问题出在未强制标准模式、未重置默认样式、未对现代CSS/JS做兼容兜底；根本原因是浏览器解析逻辑差异，非人为故意。
直接说结论：index.html 在不同浏览器显示不一致，90% 以上问题出在「没有强制标准模式」+「没重置默认样式」+「用了现代 CSS/JS 但没兜底」。不是浏览器故意搞事，是它们对同一段代码的解析逻辑真不一样。
DOCTYPE 缺失或写错会触发怪异模式
IE、Edge（旧版）、甚至某些 Safari 版本，只要 index.html 开头没写对 ，或者前面多了空格、注释、BOM 字节，就会退化到怪异模式（Quirks Mode）。这时盒模型、浮动、<code>width 计算全乱套——比如你设 width: 100px; padding: 10px;，IE 怪异模式下渲染出来就是 120px 宽。
- 确保
是文件第一行，前面**绝对不能有任何字符**（包括 UTF-8 BOM） - 用 VS Code 打开后右下角检查编码是否为「UTF-8」，不是「UTF-8 with BOM」
- 用浏览器开发者工具按
F12→ 切到「Console」，看有没有提示「Document is in Quirks Mode」
CSS 默认样式不统一导致布局偏移
Chrome 默认 <h1></h1> 的 margin-top 是 0.67em，Firefox 是 0.83em，IE8 是 1.33em；<ul></ul> 的左边距在 Safari 下是 40px，在 IE6 下是 20px。这些差异叠加起来，整个页面就“歪了”。
- 别手写
* { margin: 0; padding: 0; }—— 它会干掉表单控件、<button></button>的原生间距，反而引发新问题 - 改用
normalize.css（推荐）或reset.css，放在所有自定义 CSS 之前加载 - 如果只用一个文件，把
normalize.css内容复制进style.css最顶部，别漏掉@import或<link>顺序
Flexbox 在 IE11 中行为残缺必须手动补漏
IE11 支持 Flexbox，但只支持 2012 年老草案语法，且大量属性名和行为不一致。比如 flex: 1 在 IE11 下完全无效，align-items: center 可能不居中，flex-wrap: wrap 配合 min-width 会崩溃。
立即学习“前端免费学习笔记（深入）”；
- 用
Autoprefixer+postcss自动加前缀，配置目标浏览器至少包含ie >= 11 - 避免缩写：把
flex: 1拆成flex-grow: 1; flex-shrink: 1; flex-basis: 0; - IE11 不支持
gap，用margin模拟；不支持place-items，老老实实用justify-content+align-items - 测试时打开 IE11 的 F12 工具 → 「Emulation」→ 把 Document mode 设为「11」，别信「Edge」模式
JavaScript 语法和 API 在 IE11 中直接报错
IE11 支持 ES5，但对 const/let（虽部分支持）、for...of、Array.from、fetch、Promise 等零支持。一旦代码里出现，控制台直接白屏或卡死，连错误堆栈都不给。
- 不要靠 Babel 转译就以为万事大吉：确认
.babelrc或babel.config.js里targets明确写了ie: "11" - 全局引入
core-js/stable和regenerator-runtime/runtime（注意顺序：前者必须在后者之前） - 用特性检测替代 UA 判断：
if ('fetch' in window)比if (/MSIE|Trident/.test(navigator.userAgent))更可靠 - 服务器日志里若
MSIE或TridentUA 占比连续三个月低于 0.1%，建议直接移除所有 IE 兼容逻辑
最常被忽略的一点：IE11 的 vh 单位在地址栏展开/收起时会错乱，calc(100vh - 60px) 这种写法在真实手机 IE（或 Edge IE 模式）里可能突然变高或变矮——这种问题只能用 JS 动态计算并设 style.height，CSS 无解。
