不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异。

浏览器 内核(渲染引擎)
Chrome谷歌 之前Webkit,已改Blink内核
FireFox火狐 Gecko
Safari苹果 Webkit
IE Trident
Opera欧朋 现已改用Google Chrome的Blink内核

本文参考自前端常见浏览器兼容性问题解决方案,针对的浏览器是Chrome,Safari和FireFox。

1. 不同浏览器的标签默认的margin和padding不同

解决方法:

  1. CSS里 *{margin:0;padding:0;} 但是性能不好
  2. 一般我们会引入reset.css样式重置(CSS文件开头用样式重置各个标签的内外补丁是0。)

2. 不同浏览器的标签的默认样式不同,比如button标签

通过重置button标签的CSS属性,然后再将它统一定义,就可以产生相同的显示效果。

3. css3新属性,加浏览器前缀兼容早期浏览器

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐