现代浏览器虽遵循html5标准，但长期维护需严守四条约束：① doctype必须顶格无bom；② html5语义标签须配display:block样式；③ normalize.css须在自定义css前加载并加box-sizing重置；④ js特性检测应基于api而非ua字符串。
现代主流浏览器（Chrome、Firefox、Safari、Edge）已基本统一遵循 HTML5 标准，但“写出来能跑”不等于“质量可靠”——真正影响长期维护和跨版本稳定性的，是几条看似简单却极易被忽略的约束。
DOCTYPE 必须顶格且无 BOM
这是所有兼容性问题的开关。哪怕开头只有一个空格、一个 UTF-8 BOM 字节或 <!-- 注释 -->，Chrome 和 Edge 都会降级为 Quirks Mode，导致 document.body.scrollTop 返回 0、getComputedStyle 计算错乱、Flex/Grid 布局失效等连锁反应。
- 验证方式：打开 Chrome DevTools → Elements 面板顶部看渲染模式，必须显示
Standards - VS Code 右下角编码要选
UTF-8 without BOM，不是UTF-8 - 构建阶段可用
html-validate或 shell 脚本检查首行是否含不可见字符
HTML5 语义标签不能只靠 html5shiv 就完事
IE9–IE11 识别 <main></main> 等标签但默认当 inline 渲染；IE8 及以下连 DOM 节点都不创建。仅引入 html5shiv 不解决样式问题，布局仍会塌陷。
- 必须配 CSS 规则：
main, section, article, aside, nav, header, footer { display: block; } - 条件加载更安全：
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - 若目标环境已明确淘汰 IE，可跳过，但别在政企项目里假设“没人用 IE11”
normalize.css 必须在所有自定义 CSS 之前加载
不同浏览器对 <h1></h1> 的 margin-top 默认值差异可达 0.16em，表单控件尺寸、列表缩进逻辑也各不相同。不统一就等于给每个浏览器发不同图纸。
- 别用
reset.css：它把所有margin/padding归零，反而要重写大量基础样式 -
normalize.css保留合理默认值，只修复已知 bug，更适合现代项目 - 务必加全局重置：
* { box-sizing: border-box; }，否则 IE 宽高计算和现代浏览器差一个padding
JS 特性检测不能依赖 navigator.userAgent
UA 字符串早已不可信：新版 Chrome/Firefox 默认隐藏真实版本，Android WebView 可伪造成任意 UA，企业内网浏览器甚至返回空字符串。
- 正确写法：
if ('localStorage' in window) { ... }、if (window.addEventListener) { ... } - 避免
if (navigator.userAgent.includes('Chrome'))这类判断，它在 Safari 17+ 和 Edge 115+ 中大概率失效 - Polyfill 加载应基于特性缺失检测，而非浏览器型号 ——
polyfill.io的 URL 参数必须传features=fetch,Promise而非ua=ie11
最易被忽略的点是：这些约束之间存在强依赖关系。比如 normalize.css 失效常源于 DOCTYPE 错误触发的怪异模式，而 JS 检测失败又可能让降级逻辑根本没执行。它们不是孤立 checklist，而是一套咬合运转的机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
