HTML兼容性问题必须通过标准声明、特性检测、降级兜底三层解决：DOCTYPE须顶格无BOM和空格，否则触发怪异模式；IE8需手动设语义标签display:block；JS用存在性检测而非UA判断。
HTML重构中兼容性问题不能靠“加个polyfill就完事”，必须从 DOCTYPE、语义标签渲染、JS特性检测三根柱子上同时加固——缺一根，补丁越多越容易崩。
DOCTYPE必须顶格且无BOM，否则直接进怪异模式
这是所有兼容问题的开关。只要HTML源码第一行前面有空格、<!--注释、<?php输出的空白，或UTF-8 BOM字节，IE和旧版Edge立刻进入Quirks Mode。盒模型、浮动逻辑、字体渲染全乱套，后续所有CSS/JS都可能失准。
- 验证方式：Chrome DevTools → Elements面板顶部看渲染模式，显示
Standards才算成功；若显示Quirks，就得回查源码开头 - VS Code或Sublime右下角检查编码是否为
UTF-8（非UTF-8 with BOM） - CI流程中可加脚本校验：
head -c 3 file.html | xxd查BOM；或用grep -l '^<' *.html确认DOCTYPE是否真正在首行
IE8–IE11里HTML5语义标签默认是inline，必须手动设display:block
仅引入html5shiv不够——它只让IE知道<header>这类标签存在，但不会自动设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')零散调用——漏写、难维护，且没解决样式问题 - 正确写法：
if ('localStorage' in window) { ... }或if (window.addEventListener) { ... } - Modernizr生成的类名（如
flexbox、no-flexbox）比UA可靠得多，但需确保normalize.css在Modernizr之前加载 - ES6语法（如箭头函数、
const）必须经Babel转译；es5-shim可补Array.map等老IE缺失方法，但别指望它支持Promise - 别用Eric Meyer的Reset：它把所有
margin/padding归零，反而要重写大量基础样式 -
normalize.css保留合理默认值（如表单控件尺寸、列表缩进逻辑），只修复已知跨浏览器bug - 全局
box-sizing重置很关键：* { box-sizing: border-box; }，否则IE宽高计算和现代浏览器差一个padding
JS不能靠navigator.userAgent判断浏览器，得用API存在性检测
UA字符串极易伪造、过时，新版Chrome/Firefox已开始隐藏真实版本号。某Android WebView声称是Chrome，却缺失localStorage；Safari可能伪装成旧版绕过限制。
立即学习“前端免费学习笔记（深入）”；
normalize.css必须在所有自定义CSS之前加载，且要配* { box-sizing: border-box; }
Chrome的<h1></h1>默认margin-top是0.67em，Firefox是0.83em，IE6甚至用像素值。不统一就等于给每个浏览器发不同图纸。
重构时最容易被忽略的，是HTML源码开头那几个看不见的字符——空格、BOM、PHP输出缓冲、模板引擎注入的空白。它们不报错，但会让整个页面在IE里“悄悄崩掉”。先验这个，再谈其他兼容动作。
