必须顶格书写DOCTYPE且无BOM，语义标签需手动设display:block，JS应使用能力检测而非UA判断。这三项是兼容性根基，任一缺失都将引发连锁错误。
DOCTYPE必须顶格且无BOM，否则直接进怪异模式
这是所有兼容问题的起点。只要<!DOCTYPE html>前面有空格、注释、UTF-8 BOM字节，IE和旧Edge就会触发Quirks Mode——盒模型错、float行为乱、document.body.scrollTop读不到值，后续所有CSS/JS都可能失准。
验证方式：Chrome DevTools → Elements面板顶部显示“Standards”才算成功；若显示“Quirks”，就得回查源码开头。
- VS Code右下角确认编码是
UTF-8 without BOM（不是UTF-8 with BOM） - 删掉
<!DOCTYPE html>前所有字符，包括<!-- 注释 -->、PHP输出的空白、甚至不可见的BOM - 别用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">这类过时声明，现代浏览器反而解析更不稳定
IE8–IE11不识别等语义标签，光引html5shiv不够
html5shiv只让IE知道这些标签存在，但不会自动设display: block。结果是<nav>默认当inline渲染，布局直接塌陷；IE8及以下连DOM节点都创建不出来。
必须手动加CSS规则：
立即学习“前端免费学习笔记（深入）”；
main, section, article, aside, nav, header, footer { display: block; }- 条件加载更安全：
<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - 如果目标用户基本不用IE，可跳过这步——但别假设“没人用IE”，政企内网环境仍卡在IE11
- 别用
document.createElement('header')手动创建，容易漏写、难维护，且没解决样式问题
CSS默认样式不一致，normalize.css比reset.css更实用
Chrome的<h1>默认margin-top是0.67em，Firefox是0.83em，IE6甚至用像素值。不统一就等于给每个浏览器发不同图纸。
- 别用Eric Meyer的
reset.css：它把所有margin/padding归零，反而要重写大量基础样式 - 用
normalize.css：保留合理的默认值（如表单控件尺寸、列表缩进逻辑），只修复已知跨浏览器bug -
<link rel="stylesheet" href="normalize.css">必须放在所有自定义CSS之前 - 务必加全局重置：
* { box-sizing: border-box; }，否则IE宽高计算和现代浏览器差一个padding
JS不能靠navigator.userAgent判断，要用'localStorage' in window这类存在性检测
UA字符串极易伪造、过时、不可靠。比如某Android WebView声称是Chrome，却缺失localStorage；或者新版Safari假装成旧版来绕过限制。
正确做法是检测能力本身：
if ('localStorage' in window) { /* 安全使用 */ }- 用
if (window.addEventListener)代替if (navigator.userAgent.indexOf('MSIE') !== -1) - 避免直接使用
let/const或箭头函数，除非构建流程明确转译到ES5 - 对缺失API提供polyfill，如
es5-shim补Array.map，但优先考虑是否真需要支持IE8
真正卡住人的从来不是某个具体属性不生效，而是三件事没做对：DOCTYPE顶格、语义标签显式设display:block、JS用存在性检测而非UA。这三根柱子歪了，补丁越多越容易崩。
