css reset浅谈

Posted 2020-06-14

我们都知道，web开发中浏览器兼容性是困扰很多开发者的一个问题。所谓兼容性问题，即不同浏览器对同一段代码有不同的解析效果。而我们的需求往往是无论用户使用何种浏览器查看我们的网站，都应该获得相同或相近的体验。

浏览器兼容性问题主要分为html兼容问题（标签及其所属api的兼容问题）、css兼容问题、javascript兼容问题。今天只简洁说说其中一个点，这也是我们常常会遇到的，即样式兼容问题。

常见的样式兼容问题有：

外边距、内边距表现不一致；

某些元素在不同浏览器中是块状还是行内显示不明确；

垂直对齐方式的表现不一致性；

a链接、input输入框、按钮、img的下划线、外轮廓、边框表现不一致；

移动设备方向变化后文字大小变化的不一致性；

……

基于诸如上述问题，我们通常采用所谓css重置来解决，即重写会出现浏览器兼容性问题的标签的样式，以此来覆盖浏览器默认样式，达到表现一致的目的。常用的工具类有reset.css，不过reset.css比较激进，我们现在更常用的是normalize.css。