doctype必须首行无空格，否则ie/旧edge强制进入quirks mode；html5shiv不解决display问题，需css显式设html5标签为block；js应特性检测而非ua判断；flex/grid需降级方案；各兼容层须严格按顺序执行。
DOCTYPE 必须首行无空格，否则直接进 Quirks Mode
只要 HTML 源码第一行不是 ，而是前面带了空格、BOM、注释或 PHP 输出空白，IE 和旧 Edge 就会强制进入怪异模式。这时盒模型、float 行为、font-size 计算全乱套，后续所有 CSS/JS 都可能偏移。
验证方式很简单：打开 Chrome DevTools → Elements 面板顶部看渲染模式，显示 Standards 才算成功；若显示 Quirks，就得立刻回查源码开头。
- 用 VS Code 或 Sublime 打开文件时，右下角确认编码是
UTF-8（不是UTF-8 with BOM） - 构建阶段加
html-validate或 CI 脚本检查首行合规性，比人工扫更可靠 - 服务器端模板（如 PHP、Jinja）要确保
是输出的第一字符，不能被任何前置逻辑插入空白
IE8 及以下必须手动设语义标签 display:block
html5shiv 只解决“标签存在性”，不解决“默认 display 值”。IE8 把 <header></header>、<nav></nav> 当作未知 inline 元素处理，结果就是布局塌陷、margin 失效、width/height 不生效。
光靠 html5shiv 加载完再写 CSS 是来不及的——样式表已解析完毕，新注册的标签根本匹配不到规则。
- CSS 文件顶部必须显式声明：
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } - 漏掉任何一个（比如没写
main或details），对应区域就可能错位或消失 - 别指望 PostCSS/Autoprefixer 自动补全——它们不处理 HTML5 标签的 display 重置
JS 特性检测不能依赖 navigator.userAgent
UA 字符串极易伪造、过时、不可靠。比如某 Android WebView 声称是 Chrome，却缺失 localStorage；新版 IE11 可能伪装成 IE10 来绕过服务端拦截。
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
真正有效的做法是检测 API 是否可用，而不是猜浏览器型号。
- 用
if ('querySelector' in document)替代if (navigator.userAgent.indexOf('MSIE') !== -1) -
if ('fetch' in window)不成立时，降级到XMLHttpRequest，而不是硬写 try/catch 包裹 fetch - 避免
const/let（IE10 及以下不支持），统一用var更稳妥；箭头函数也得转成 function 表达式
Flex/Grid 回退方案不能只靠前缀
display: -ms-flexbox 在 IE10+ 有部分支持，但行为差异大；display: grid 在 IE 中完全无效，加 -ms-grid 前缀也没用。
靠 Autoprefixer 补前缀解决不了根本问题，它只是语法转换，不解决渲染逻辑断裂。
- 复杂 Flex 布局建议直接回退为
float+clear或inline-block+vertical-align - Grid 布局必须重写为 table-cell 或用
@supports (display: grid)包裹新写法，旧浏览器自动跳过 - 绝对不要用
gap、place-items等 IE 无等效替代的属性
最常被忽略的是：这些策略必须按顺序执行——DOCTYPE 是开关，html5shiv 和 display:block 是 DOM 层基础，特性检测和降级是 JS 层兜底。漏掉任意一层，兼容性就断在某个环节上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
