HTML浏览器兼容性问题靠标准声明+特性检测+降级兜底三层解决：DOCTYPE必须首行无空格，html5shiv需配display:block规则，用Normalize.css统一默认样式，JS用存在性检测而非UA判断，构建配置须精准覆盖目标浏览器。
HTML浏览器兼容性问题不是靠“猜浏览器型号”解决的，而是靠标准声明 + 特性检测 + 降级兜底三层动作落地。没有万能补丁，但每一步都踩对了，IE8 到 Chrome 120 都能稳住核心结构和功能。
DOCTYPE 必须首行无空格，否则直接进怪异模式
这是所有兼容问题的起点。一旦触发怪异模式（Quirks Mode），IE 和旧版 Edge 会用完全不同的盒模型、字体渲染和浮动逻辑解析页面，后续所有 CSS 和 JS 都可能失准。
-
<!DOCTYPE html>是唯一推荐写法，大小写不敏感，但必须独占第一行 - 前面不能有任何字符——包括
<!-- 注释 -->、<?php输出的空白、甚至 UTF-8 BOM 字节 - 验证方式：在 Chrome DevTools 的 Elements 面板顶部看渲染模式，显示 “Standards” 才算成功；若显示 “Quirks” 就得回查 HTML 源码开头
HTML5 语义标签在 IE8 及以下默认是 inline，必须手动设 block
像 <header>、<nav>、<section> 这些标签，在 IE8 及更早版本里不会被当块级元素处理，直接导致布局塌陷、样式失效。
- 仅引入
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 更实用
Chrome 默认 <h1> margin-top 是 0.67em，Firefox 是 0.83em，IE6 甚至用像素值。不统一就等于给每个浏览器发不同图纸。
立即学习“前端免费学习笔记（深入）”；
- 别用 Eric Meyer 的 Reset：它把所有
margin/padding归零，反而要重写大量基础样式 - 用
normalize.css：保留合理的默认值（如表单控件尺寸、列表缩进逻辑），只修复已知跨浏览器 bug - 加载顺序必须严格：
<link rel="stylesheet" href="normalize.css">要在任何自定义 CSS 之前 - 特别注意：
* { box-sizing: border-box; }全局重置很关键，否则 IE 的宽高计算和现代浏览器差一个padding
JS 特性不能靠 navigator.userAgent 判断，要用存在性检测
用户代理字符串（UA）极易伪造、不可靠，且新版浏览器常主动伪装成旧版以绕过服务端拦截。检测具体能力才是正解。
- 错误写法：
if (/MSIE 9/.test(navigator.userAgent)) { ... } - 正确写法：
if ('localStorage' in window) { ... }或if (window.addEventListener) { ... } - 对缺失 API 做 polyfill：比如 IE8 没有
Array.prototype.forEach，可自行补全或引入es5-shim - 构建时用 Babel 转译语法（如
let/const、箭头函数），但注意：转译不等于兼容，fetch即使转成 ES5 也依然不存在于 IE
最容易被忽略的点是：很多团队只做“样式兜底”，却忘了 JS 功能链路上任何一个环节失效（比如 document.querySelector 返回 null、addEventListener 未注册成功），都会导致后续逻辑静默失败。务必在关键节点加 console.warn 或 try/catch 日志，而不是等用户反馈“按钮点不动”。
