DOCTYPE必须首行无空格，否则IE/Edge Legacy直接进入怪异模式；需确保<!DOCTYPE html>独占第一行、无BOM、无注释、无空格，并配合html5shiv与display:block规则、normalize.css前置及box-sizing重置。
DOCTYPE必须首行无空格，否则IE/Edge Legacy直接进怪异模式
这是所有兼容问题的开关。一旦触发Quirks Mode，IE和旧版Edge会用完全不同的盒模型、浮动逻辑和字体度量解析整个页面——后续所有CSS和JS都可能失准。
验证方式：在Chrome DevTools的Elements面板顶部看渲染模式，显示Standards才算成功；若显示Quirks，就得回查HTML源码开头。
-
<!DOCTYPE html>必须独占第一行，前面不能有任何字符：包括<!-- 注释 -->、PHP输出的空白、甚至UTF-8 BOM字节 - 大小写不敏感，但格式要干净；不要写成
<!doctype html>或<!DOCTYPE HTML> - 构建时用
html-validate或CI脚本检查首行是否合规，比人工更可靠
HTML5语义标签在IE8及以下需显式设display: block
像<header>、<nav>、<main>这些标签，IE8及更早版本根本不识别，会默认当inline元素处理，导致布局塌陷、margin失效、无法被querySelector('main')匹配。
仅引入html5shiv不够：它只让IE知道这些标签存在，但不会自动加display: block规则。
立即学习“前端免费学习笔记（深入）”；
- 必须手动补全局样式：
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]--> - 如果目标用户基本不使用IE，可跳过这步，但别假设“没人用IE”——有些政企内网环境仍卡在IE11
normalize.css必须放在所有自定义CSS之前，且配* { box-sizing: border-box; }
CSS默认样式不一致是隐形杀手：Chrome里<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 - 避免用
all: unset或all: revert——Safari 9.1–13.1中行为不稳定，可能让<button>失去可点击态
Flex/Grid容器内慎用display: contents和appearance: none
display: contents让父元素不参与盒模型，但Firefox 63+才支持，IE全系不支持——用了它，整个结构在IE里就塌了，还不好排查。
appearance: none隐藏原生控件样式时，记得手动补cursor: pointer和outline，否则在Firefox中可能失去焦点反馈。
- 旧版Safari对
<input>在flex容器里的表现异常，建议外层加div包裹并设display: flex而非直接放<input> -
<select>的size属性在Chrome/Firefox中表现一致，但在Edge Legacy里会强制显示滚动条，即使选项不够多 - JavaScript操作DOM时，常假设HTML结构“按预期存在”，但跨浏览器下DOM解析有细微差异：比如
document.createElement('main')在IE11中创建的是未知元素，typeof mainElement === 'object'是true，但它没有默认样式、也不被querySelector('main')匹配到——除非你提前“注册”过
真实项目里最麻烦的不是语法错误，而是那些“看起来正常但某台机器上突然错位”的问题——往往出在DOCTYPE前多了一个空格、normalize.css加载顺序错了、或者某个flex子项在Safari里被当成inline处理了。这些点不写进CI检查项，靠人眼根本防不住。
