normalize.css 通过标准化浏览器默认样式解决跨浏览器差异,保留有用默认行为并修复常见渲染问题,提升页面兼容性与开发效率。

normalize.css 是一个用于统一不同浏览器默认样式的 CSS 工具,它的核心作用是让网页在不同浏览器中表现更一致。
解决浏览器默认样式差异
每种浏览器(如 Chrome、Firefox、Safari、Edge)对 HTML 元素的默认样式处理方式不同。比如:
- h1 ~ h6 标题的上下边距大小不一
- p 段落的首行缩进或间距存在差异
- ul 列表在不同浏览器中的左缩进不同
- button、input 等表单元素的字体、尺寸表现不统一
normalize.css 针对这些常见元素设置了一套标准化的样式规则,使它们在所有现代浏览器中渲染效果基本一致。
保留有用的默认样式
与另一种重置方案 reset.css 不同,normalize.css 不会把所有样式清零。它选择性地保留那些合理、可访问性强的默认行为,例如:
立即学习“前端免费学习笔记(深入)”;
- 保持 em、strong 的斜体和加粗效果
- 保留 small 元素的小字号语义
- 维持有序和无序列表的结构化展示
这种方式更温和,避免开发者重新定义大量基础样式。
修复常见浏览器 Bug
normalize.css 还修正了一些浏览器中存在的显示问题,比如:
- HTML5 元素在旧版 IE 中无法正确识别(配合 html5shiv 可增强支持)
- pre、code 在某些浏览器中换行异常
- focus 轮廓线在部分元素上缺失影响可访问性
这些问题的修复提升了页面的兼容性和可用性。
提升开发效率与维护性
使用 normalize.css 后,团队无需为跨浏览器兼容花费额外精力。你可以基于一套稳定的基准样式进行开发,减少“为什么在别人电脑上长得不一样”的问题。它体积小、兼容性好,已成为现代前端项目的常用基础组件之一。
基本上就这些 —— 它不是彻底重置,而是智能归一化,让浏览器表现更可靠。










