html兼容性需通过标准声明、特性检测、降级兜底三层解决：doctype必须首行无空格/bom以避免怪异模式；ie8需手动设语义标签display:block；用normalize.css而非reset.css；js须用存在性检测而非ua判断。
HTML 兼容性问题不是靠“猜浏览器型号”解决的，而是靠标准声明 + 特性检测 + 降级兜底三层动作落地。没有万能补丁，但每一步都踩对了，IE8 到 Chrome 120 都能稳住核心结构和功能。
DOCTYPE 必须首行无空格，否则直接触发怪异模式
一旦 HTML 源码开头有空格、BOM 字节或注释（比如 <!--> 或 <?php 输出的空白），IE 和旧版 Edge 就会进入 Quirks Mode。这时盒模型、浮动逻辑、字体渲染全乱套，后续所有 CSS/JS 都可能失准。
<!DOCTYPE html>是唯一推荐写法，必须独占第一行，大小写不敏感但不能带任何前置字符- 验证方式：打开 Chrome DevTools → Elements 面板顶部看渲染模式，显示
Standards才算成功；若显示Quirks，就得回查源码开头 - 特别注意 UTF-8 BOM：用 VS Code 或 Sublime 打开文件时，右下角检查编码是否为
UTF-8（非UTF-8 with BOM）
IE8 及以下不识别 <header> 等语义标签，仅引入 html5shiv 不够
html5shiv 只让 IE 知道这些标签存在，但不会自动设 display: block。结果是 <nav> 默认当 inline 渲染，布局直接塌陷。
- 必须手动加 CSS 规则：
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } - 条件加载更安全：
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - 不推荐用
document.createElement('header')手动创建——容易漏写、难维护，且没解决样式问题 - 别用 Eric Meyer 的
reset.css：它把所有margin/padding归零，反而要重写大量基础样式 - 用
normalize.css：保留合理的默认值（如表单控件尺寸、列表缩进逻辑），只修复已知跨浏览器 bug - 加载顺序必须严格：
<link rel="stylesheet" href="normalize.css">要在任何自定义 CSS 之前 - 全局
box-sizing重置很关键：* { box-sizing: border-box; }，否则 IE 的宽高计算和现代浏览器差一个padding - 正确做法是检测能力本身：
if ('localStorage' in window) { /* 使用 */ } else { /* 降级 */ } - Modernizr 可自动生成类名：
，再配合 CSS 写.flexbox .container { display: flex; } - 构建时若用 PostCSS，
autoprefixer能自动补-ms-、-webkit-等前缀，但别依赖它处理 IE10 以下的display: -ms-flexbox—— 那是语法级差异，需单独降级
CSS 默认样式不一致，normalize.css 比 reset.css 更实用
Chrome 的 <h1></h1> 默认 margin-top 是 0.67em，Firefox 是 0.83em，IE6 甚至用像素值。不统一就等于给每个浏览器发不同图纸。
JS 特性检测不能靠 navigator.userAgent，得用存在性判断
UA 字符串极易伪造、过时、不可靠。比如某 Android WebView 声称是 Chrome，却缺失 localStorage；或者新版 Safari 假装成旧版来绕过限制。
最容易被忽略的是：所有兼容性动作都得在真实环境里验证。比如 normalize.css 加了但没生效，可能是加载顺序错；html5shiv 引入了但样式仍不对，大概率是漏写了 display: block 规则。问题永远出在“以为做了”和“实际生效”之间的缝隙里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
