浏览器默认样式差异是布局抖动（cls）的底层诱因之一，需通过严格顺序的重置css、viewport/charset meta声明、新标签display兜底及现代normalize.css版本四者协同解决。
浏览器默认样式（Default Style）不是“没样式”，而是每个内核自带一套隐式规则，margin、padding、font-size、line-height、box-sizing全都不统一。这种差异不会报错，但会在不同浏览器里悄悄改变元素高度、行高、间距，导致首屏渲染时文字上跳、按钮下移、卡片错位——也就是布局抖动（CLS）的底层诱因之一。
为什么重置CSS必须放在所有样式之前
如果 normalize.css 或自定义重置规则写在业务 CSS 后面，它就只是“覆盖”，而不是“归零起点”。而浏览器解析 CSS 是顺序执行的，前面的默认样式已参与过首次布局计算，后面再改也来不及回溯。
- Chrome 对
h1默认设margin: 0.67em 0，Firefox 是0.83em，IE8 直接是1.33em—— 这个差值在移动端可能让整行文字偏移 2–3px -
input[type="text"]在 Safari 中默认有border-radius: 5px，Edge 则是0；若你没重置，又用 JS 测量宽度，结果就不可靠 - 更隐蔽的是
box-sizing：IE8 默认是content-box，现代浏览器默认也是，但某些国产双内核浏览器（如旧版 360、QQ 浏览器）在兼容模式下会 fallback 到怪异模式（Quirks Mode），此时所有块级元素自动变成border-box，尺寸直接错乱
用 * { box-sizing: border-box } 不够，还得加 display: block
HTML5 新增的语义化标签（header、nav、main、article 等）在 IE8 及更早版本中不被识别为块级元素，默认是 inline，导致 margin 不生效、width/height 被忽略，父容器高度塌陷——这和 float 塌陷效果一样，但更难排查。
- 仅靠
* { box-sizing: border-box }无法修复，必须显式声明header, nav, main, article, aside, footer { display: block; } - 如果你用了
Normalize.css，确认它版本 ≥ 8.0（2022 年后发布），旧版对dialog、details等新标签无处理 - 不要依赖
html5shiv来“让 IE8 支持新标签”——它只解决 createElement，不修正默认 display，仍需手动补样式
viewport 和 charset meta 标签缺失会放大默认样式偏差
没有 <meta name="viewport" content="width=device-width, initial-scale=1">，移动端浏览器会按 980px 宽度解析，所有默认字号、行高、边距都基于这个虚拟视口计算，导致实际渲染时字体突然缩放、段落间距被拉伸，抖动加剧。
- 同样，缺失
<meta charset="UTF-8">或 HTTP 头未声明Content-Type: text/html; charset=utf-8，浏览器会按系统默认编码（如 GBK）解析 HTML，DOM 文本节点损坏 →getBoundingClientRect()返回异常值 → JS 布局逻辑出错 → 触发二次重排 - 注意：
<meta charset>必须写在最前面，且不能有任何字符（包括空格、BOM）前置，否则会被忽略 - 部分双内核浏览器（如百度浏览器）在极速模式下会忽略
charset，但兼容模式下反而认——所以两个 meta 都得有，且位置严格
最常被忽略的点是：你以为自己写了重置，其实只重置了视觉，没重置计算上下文。比如 line-height: 1.5 在不同字体下真实行高仍不同，而浏览器首次布局时用的就是这个“不确定值”。要真正稳住首帧，得从 DOCTYPE、meta、重置顺序、新标签兜底四者同时卡死，少一个环节，抖动就藏在加载完成前那几十毫秒里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
