css reset浅谈

时间:2022-01-02 12:06:19

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

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

常见的样式兼容问题有:

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

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

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

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

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

……

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