前端常见的浏览器兼容问题

为什么会出现浏览器兼容问题？

现在市场上浏览器的种类很多，不同浏览器的内核也不相同，所以各个浏览器对页面的解析会有一定的出处，这也是导致浏览器兼容问题的主要原因。想要网页在主流浏览器上正常运行，就要做好浏览器的兼容问题。

常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit

IE浏览器 Trident内核，也成为IE内核

Chrome浏览器 Webkit内核，现在是Blink内核

Firefox浏览器 Gecko内核，俗称Firefox内核

Safari浏览器 Webkit内核

Opera浏览器 最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；

360浏览器 IE+Chrome双内核

猎豹浏览器 IE+Chrome双内核

百度浏览器 IE内核

QQ浏览器 Trident（兼容模式）+Webkit（高速模式）

 

 

问题一  不同浏览器的标签默认的margin 和 padding 值。（即外补丁和内补丁）

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方案：css 添加通配符 * { margin: 0, padding: 0 }

问题二  图片默认有间距。

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加上问题一中提到的通配符也不起作用。

解决方案：使用 float 属性为 img 布局。

问题三  cursor:hand 显示手型在 safari 上不支持

解决方案：统一使用 cursor:pointer

 

未完待续。。。