根本原因是各浏览器用户代理样式表对h1的margin-top定义不同：chrome为0.67em、firefox为0.83em、ie6甚至用像素硬写，导致行高错位与间距不一致；应使用normalize.css统一而非全局清零。
为什么 Chrome 的 <h1></h1> 和 Firefox 的 <h1></h1> 看起来不一样
根本原因不是“谁错了”，而是各浏览器 UA 样式表对同一标签定义了不同 margin 值：Chrome 默认 margin-top: 0.67em，Firefox 是 margin-top: 0.83em，IE6 甚至用像素硬写。这种差异会直接导致行高错位、标题间距不一致、浮动容器高度塌陷。
别指望手动覆盖每个标签的 margin/padding——工作量大且易漏。更危险的是用 * { margin: 0; padding: 0 } 全局清空，它会干掉 <button></button> 在 Firefox 中的上下内边距、<input type="search"> 在 Chrome 中为清除按钮预留的右侧空间，最终让表单控件点击热区变小、输入光标贴边。
- 优先用
normalize.css替代 reset —— 它不抹杀默认行为，只修复已知跨浏览器 bug（比如统一<h1>~<h6></h6> </h1>的 margin 比例） -
normalize.css必须在所有自定义 CSS 之前加载，否则它的基础修复会被你的规则覆盖 - 检查是否被深色模式干扰：
<mark></mark>在 Firefox 深色系统下可能渲染成浅灰，需加@media (prefers-color-scheme: dark)单独调色
<details></details> 和 <mark></mark> 在 IE/旧 Safari 中完全不显示怎么办
这类 HTML5 标签的 UA 样式差异极大：<mark></mark> 在 Chrome 是黄底，Firefox 依赖系统高亮色（可能透明），Safari 早期版本无样式；<details></details> 在 IE 和旧 Edge 中根本不渲染。
解决逻辑很明确：不能依赖 UA，默认样式必须显式声明。
- 对
<mark></mark>至少写一条：mark { background-color: #ffeb3b; color: #212121; } - 对
<details></details>，IE/Edge Legacy 需配合html5shiv，且必须补上details, summary { display: block; }——html5shiv只让 IE 知道标签存在，但不会自动设display - 条件加载更安全：
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]-->
全局 box-sizing: border-box 为什么必须加，且要放在 normalize.css 之后
IE 的盒模型默认是 content-box，而现代浏览器普遍支持 border-box。如果不统一，同样写 width: 200px; padding: 10px;，IE 算出来总宽是 220px，其他浏览器是 200px —— 布局直接错位。
* { box-sizing: border-box } 能强制所有元素按现代方式计算宽高，但它必须在 normalize.css 加载之后生效，否则会覆盖 normalize 对 <textarea></textarea>、<input> 等表单控件的合理尺寸修复。
- 不要只写
html { box-sizing: border-box }—— 它不继承，得用通配符或显式作用到所有块级/表单元素 - 注意：某些第三方组件（如旧版 Bootstrap）可能已内置
box-sizing规则，叠加后反而冲突，需检查 DevTools 计算后的样式来源
DOCTYPE 开头有空格或 BOM 就会触发怪异模式，怎么快速验证
只要 HTML 文件开头存在任意空白字符、注释或 UTF-8 BOM，IE 和旧 Edge 就会进入 Quirks Mode —— 这时浮动、盒模型、字体渲染全乱套，后续所有兼容性处理都白搭。
验证方式很简单：打开 Chrome DevTools → Elements 面板顶部看渲染模式，显示 Standards 才算成功；若显示 Quirks，就得回查源码开头。
- VS Code 或 Sublime 下右下角检查编码是否为
UTF-8（非UTF-8 with BOM） - 用命令行快速检测 BOM：
head -c 3 yourfile.html | xxd，若输出含ef bb bf就是带 BOM - PHP 或模板引擎输出前常带空白，确保
是文件绝对首行，前面不能有任何 <code><?php输出或注释
真正难处理的不是“怎么统一默认样式”，而是“统一到哪一层”——normalize.css 解决共性问题，但像 scroll-behavior: smooth 或 aspect-ratio 这种属性，得靠特性检测 + 降级方案，不能指望一个 CSS 文件包打天下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
