html兼容性取决于dom结构、css样式和js行为的协同；doctype必须顶格无bom，否则触发怪异模式；语义标签需手动设display:block；应使用normalize.css并置于自定义css前；box-sizing重置为border-box；js须用特性检测而非ua判断。
HTML组件本身不渲染，真正决定兼容性的，是它被解析后的DOM结构 + 绑定的CSS样式 + JS行为。没有“兼容的组件”，只有“兼容的写法”。
DOCTYPE必须顶格且无BOM，否则直接进怪异模式
这是所有兼容问题的开关。一旦前面有空格、<code><!-- 注释 -->、PHP输出的空白，甚至UTF-8 BOM字节，IE/Edge Legacy就会触发Quirks Mode——盒模型错乱、浮动失效、document.body.scrollTop读不准，后续所有样式和脚本都可能失准。
- 验证方式：Chrome DevTools → Elements面板顶部显示
Standards才算成功；若显示Quirks，就得回查源码开头 - VS Code右下角确认编码为
UTF-8 without BOM（不是UTF-8） - 构建时可用
html-validate或CI脚本检查首行是否合规，比人工更可靠 - 别用
这类过时声明，现代<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://m.php.cn/zt/16180.html" target="_blank">浏览器</a>反而解析更不稳定
IE8–IE11中语义标签需手动设display: block
<header></header>、<nav></nav>、<main></main>这些标签在IE8及以下根本不识别，IE9–11虽能创建DOM节点，但默认当inline元素处理，导致布局塌陷、margin失效、querySelector('main')查不到。
- 仅引入
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://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - 别用
document.createElement('header')手动创建——漏写难维护，且没解决样式问题
用normalize.css而非reset.css，且必须放在所有自定义CSS之前
Chrome里<h1></h1>的margin-top是0.67em，Firefox是0.83em，IE6甚至用像素值。不统一就等于给每个浏览器发不同图纸。
-
reset.css（如Eric Meyer版）把所有margin/padding归零，反而要重写大量基础样式 -
normalize.css保留合理的默认值（如表单控件尺寸、列表缩进逻辑），只修复已知跨浏览器bug -
<link rel="stylesheet" href="normalize.css">必须严格放在所有自定义CSS之前 - 务必加全局
box-sizing重置：* { box-sizing: border-box; }，否则IE宽高计算和现代浏览器差一个padding
JS不能靠navigator.userAgent判断，要用API存在性检测
UA字符串极易伪造、过时，且新版Chrome/Firefox已开始隐藏真实信息。比如某Android WebView返回的UA可能根本没提WebKit版本，但localStorage其实可用。
- 正确写法：
if ('localStorage' in window) { /* 使用 */ } else { /* 降级 */ } - 事件监听优先用
addEventListener，IE8及以下才回退到attachEvent - 避免硬编码
if (navigator.userAgent.indexOf('MSIE') !== -1)这类判断 - 构建时若需支持老环境，用
Babel转译ES6+语法，但核心逻辑仍应基于特性存在性而非版本号
最容易被忽略的是：所有这些动作必须协同生效——DOCTYPE错了，后面加再多normalize.css和html5shiv也救不回盒模型；normalize.css加载顺序错了，box-sizing重置就可能被覆盖；JS检测写了但没配降级逻辑，功能就直接消失。兼容性不是堆补丁，而是每一步都踩在标准路径上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
