CSS 样式在不同浏览器展示效果不同的解决方案 !

在前端样式开发时，我们会遇到，同样的样式在不同的浏览器展示不同的效果，一个一个去兼容太过于耗费时间和精力。这个时候可以使用Normalize.css这个插件。

---

Normalize.css 是一个用于标准化浏览器默认样式的 CSS 库。它的主要目的是让网页在不同浏览器中具有一致的渲染效果，从而减少跨浏览器兼容性问题。 与重置样式表（如 Eric Meyer’s Reset）不同，Normalize.css 不是完全移除所有浏览器的默认样式，而是对这些默认样式进行统一和规范化。

主要功能

1. 统一默认样式

   • 统一了不同浏览器中 HTML 元素的默认样式，例如 margin、padding、line-height 等。
   • 使表格、表单元素、列表等在不同浏览器中看起来一致。

2. 修复了一些常见的浏览器渲染问题

   • 清除浮动的影响。
   • 修正 inline-block 元素之间的空白间隙。
   • 修正 input 和 textarea 的字体继承问题。
   • 修正 button 元素的默认样式问题。

3. 提高可读性和可维护性

   • 通过提供一致的基线样式，使得开发者可以更专注于实际的设计和布局，而不需要花费大量时间处理浏览器差异。
   • 代码简洁且易于理解，便于维护和扩展。

如何使用

1. 先下载对应的资源包

npm add normalize.css

2. 在main.js 文件使用即可

对比一下

原生浏览器展示：

经过 Normalize.css 处理后：