为什么CSS代码在不同浏览器表现不一_使用Normalize.css重置样式-css教程-PHP中文网

根本原因是各浏览器用户代理样式表对默认 margin、padding、font-size 等定义不同，导致 h1、button 等元素渲染差异；normalize.css 通过“收敛”而非“清零”统一有歧义的默认样式，须作为首个样式表引入，且无法解决 gap、focus-visible、aspect-ratio 等新特性兼容问题。

为什么css代码在不同浏览器表现不一_使用normalize.css重置样式

为什么 `margin` 在 Chrome 和 Firefox 里看起来不一样

根本原因不是浏览器“乱来”，而是各浏览器内置的 user agent stylesheet（用户代理样式表）对元素默认 margin、padding、font-size 的定义不同。比如 h1 在 Safari 默认加了 margin-block-start: 0.67em，而 Firefox 可能是 0.83em；button 的 line-height 和 border 渲染逻辑也存在细微差异。

这些差异在单个元素上不明显，但一旦嵌套、组合或响应式布局时，就会放大成错位、行高塌陷、按钮高度不一致等问题。

不要靠手写 * { margin: 0; padding: 0; } —— 它抹掉所有语义化默认行为，反而让 fieldset、details 等元素失去可访问性基础样式
避免只测 Chrome —— Edge（Chromium 内核）和 Safari（WebKit）对 rem 基准、flex 子项最小尺寸处理仍有分歧
注意 Normalize.css 不是“清零”，而是“收敛”：保留有用的默认行为（如 audio 的播放控件、sub/sup 的垂直偏移），仅统一有歧义的部分

如何正确引入 `Normalize.css` 而不覆盖自定义样式

顺序决定一切：Normalize.css 必须作为整个 CSS 加载链的**第一个外部样式表**，且必须放在所有自定义 CSS 文件之前。

错误写法：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<link rel="stylesheet" href="main.css"><br><link rel="stylesheet" href="normalize.css">

这会让 main.css 里的规则被 normalize.css 后续重置覆盖，白忙一场。

推荐用 CDN（版本锁定）：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
如果用构建工具（Vite/Webpack），在入口 main.css 或 index.scss 顶部用 @import，且确保它排第一：@import 'normalize.css';
不要把 normalize.css 内容复制进你自己的 CSS 文件头部 —— 某些构建工具会因 @charset 声明位置异常导致编码解析失败

`Normalize.css` 解决不了的三类常见兼容问题

它专注 HTML 元素默认样式的收敛，不处理 CSS 新特性兼容、布局引擎差异或 JS 驱动样式。

gap 在 Flex 布局中仍需 -webkit-gap（Safari ≤16.4）—— Normalize.css 不加前缀
:focus-visible 行为在 Firefox 和 Chrome 中触发逻辑不同，需额外用 focus-visible polyfill 或手动降级
aspect-ratio 在旧版 Edge（EdgeHTML）完全不支持，Normalize.css 不做 fallback，得自己写 padding-top 响应式技巧