17370845950

需使用CSS Reset统一浏览器默认样式差异，推荐Normalize.css而非传统Reset，因其保留有用默认样式、修复跨浏览器bug且轻量；再配合box-sizing等自定义重置提升开发体验。

不同浏览器对HTML元素有各自的默认样式（比如 margin、padding、字体大小、列表缩进等），这会导致同一份CSS在Chrome、Firefox、Safari、Edge甚至旧版IE中渲染效果不一致。解决的核心思路是：**先清空浏览器默认样式，再统一定义**——这就是“CSS Reset”的作用。

为什么需要 Reset CSS 而不是直接写样式？

不重置的话，你可能遇到这些情况：

• 段落间距错乱：Chrome 给 p 默认上下边距20px，Firefox 可能是16px；
• 按钮/输入框高度不一：input 和 button 的行高、内边距、边框在各浏览器中差异明显；
• 列表项缩进混乱：ul/ol 的左边距和项目符号位置不统一；
• 标题字体粗细/大小浮动：h1–h6 的默认 font-weight 和 font-size 各有偏好。

推荐用 Normalize.css（比传统 Reset 更现代）

传统 Reset（如 Eric Meyer’s Reset）会把所有元素样式设为 0 或 none，过于激进，反而丢失了有用的默认行为（如表单控件的可访问性样式）。Normalize.css 是更优选择：

• 保留有意义的默认样式（比如 strong 加粗、blockquote 缩进）；
• 修复跨浏览器 bug（如 iOS Safari 中的点击高亮、Firefox 中的表单聚焦轮廓）；
• 文档清晰，每条规则都有注释说明“为什么这样写”；
• 轻量（压缩后仅约2KB），支持主流现代浏览器及 IE9+。

使用方式很简单：在你自己的CSS文件之前引入：

配合现代布局习惯做轻量自定义重置

Normalize 解决了兼容性基础，但你还可加一段简短的“自定义重置”，让开发更顺手：

• 统一盒模型：全局设置 box-sizing: border-box，避免 padding 撑开宽度；
• 移除默认轮廓干扰：给 :focus 元素统一加可访问的聚焦样式，而不是直接 outline: none；
• 字体继承简化：让表单元素、代码块等自动继承父级字体，减少重复声明；
• 图片默认垂直对齐：img { vertical-align: middle; } 避免基线留白。

示例片段（放在 Normalize 之后、业务CSS之前）：

别忘了测试与渐进增强

Reset 只是起点，不是终点：

• 在目标浏览器（尤其是你产品真实用户常用的版本）中手动点检关键页面；
• 用开发者工具对比 computed styles，确认 margin、padding、line-height 是否真正一致；
• 对老版本浏览器（如 IE11），可配合 Autoprefixer + postcss-preset-env 自动补全前缀和特性降级；
• 避免过度依赖 Reset 掩盖结构性问题——语义化HTML、合理嵌套、BEM类命名，才能让样式真正稳定。