HTML页面兼容性问题靠标准声明+特性检测+降级兜底三层解决：DOCTYPE必须首行无空格，html5shiv需配display:block规则，用Normalize.css统一默认样式，JS用存在性检测而非UA判断，构建配置须精准覆盖目标浏览器。
HTML页面兼容性问题不是靠“猜浏览器型号”解决的，而是靠标准声明 + 特性检测 + 降级兜底三层动作落地。没有万能补丁，但每一步都踩对了，IE8 到 Chrome 120 都能稳住核心结构和功能。
DOCTYPE 必须首行无空格，否则直接触发怪异模式
这是所有兼容问题的起点。一旦触发怪异模式（Quirks Mode），IE 和旧版 Edge 会用完全不同的盒模型、字体渲染和浮动逻辑解析页面，后续所有 CSS 和 JS 都可能失准。
是唯一推荐写法，必须独占第一行，前面不能有任何字符——包括 <code><!-- 注释 -->、<?php输出的空白、甚至 UTF-8 BOM 字节- 验证方式：在 Chrome DevTools 的 Elements 面板顶部看渲染模式，显示 “Standards” 才算成功；若显示 “Quirks” 就得回查 HTML 源码开头
- 常见误操作：
前有空格、换行、BOM 或服务端模板引擎注入的不可见字符
HTML5 语义标签在 IE8 及以下需手动设 display: block
像 <header></header>、<nav></nav>、<section></section> 这些标签，在 IE8 及更早版本里默认是 inline，直接导致布局塌陷、样式失效。
- 仅引入
html5shiv不够：它只让 IE 知道这些标签存在，但不会自动设display: block - 必须手动加 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]-->
CSS 默认样式不一致，normalize.css 比 reset.css 更实用
Chrome 默认 <h1></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，要用存在性检测
用户代理字符串（User Agent）极易伪造、过时，且新版 Chrome/Firefox 已开始隐藏真实 UA；靠它判断浏览器类型，大概率漏判或误判。
- 正确做法是特性检测：
if ('localStorage' in window)、if (window.addEventListener)、if ('Promise' in window) - 对缺失 API 提供 polyfill：比如用
es5-shim补Array.prototype.map，用core-js补Promise和fetch - 构建阶段避免直接使用 ES6+ 语法（如箭头函数、
let/const），或通过 Babel 转译为 ES5，否则老 IE 直接报SyntaxError
最容易被忽略的是：很多团队只在开发完成后再做兼容性检查，但此时 HTML 结构、CSS 布局、JS 依赖链已经固化，修复成本极高。建议把 W3C Validator 和 html5test.com 集成进 CI 流程，每次提交都校验 Doctype、标签闭合、API 可用性——越早发现，越容易改。
