市场上浏览器的种类很多,不同的浏览器内核也不同,所以对网页的解析存在一定的差异。浏览器内核主要分为两种,一是渲染引擎,另一个是 js 引擎,内核更加倾向于说渲染引擎。
常见的浏览器内核分为四种:常见的浏览器内核可以分四种:Webkit、Trident、Gecko、Blink
浏览器 | 内核 |
---|---|
IE浏览器 | Trident内核,也成为lE内核 |
Chrome浏览器 | Webkit内核,现在是Blink内核 |
Firefox浏览器 | Gecko内核,俗称Firefox内核 |
Safari浏览器 | wWebkit内核 |
Opera浏览器 | 最初是自己的Presto内核,后来加入谷歌大军,从Webkit又到了Blink内核; |
360浏览器 | IE+Chrome双内核 |
猎豹浏览器 | IE+Chrome双内核 |
百度浏览器 | IE内核 |
QQ浏览器 | Trident(兼容模式)+Webkit(高速模式) |
一、CSS兼容
1.不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
解决方案:
1.CSS里*{margin:0;padding:0;}
,但是性能不好
2.—般我们会引入 reset.css 样式重置;
备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,所有的CSS文件开头都会用样式重置各个标签的内外补丁是0。
2、IE6双边距问题;在IE6中设置了float ,同时又设置margin,就会出现边距问题
解决方案:设置display:inline;
3、当标签的高度设置小于10px,在 IE6、IE7 中会超出自己设置的高度
解决方案:超出高度的标签设置overflow:hidden;
,或者设置line-height
的值小于你的设置高度
4、图片默认有间距
解决方案:使用float
为 img 布局
5、IE9—下浏览器不能使用 opacity
解决方案:opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
6、边距重叠问题:当相邻两个元素都设置了 margin 边距时, margin将取最大值,舍弃最小值
解决方案:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden;
7、cursor:hand 显示手型在 safari上不支持
解决方案:统一使用cursor:pointer;
8、两个块级元素,父元索设置了overflow:auto;子元素设置了position:relative ;且高度大于父元素,在IE6,IF7会被隐藏而不昙溢出
解决方案:父级元素设置position:relative;
二、js兼容
1. 事件绑定
IE: dom.attachEvent();
标准浏览器: dom.addEventListener(‘click’, function(event){ },false);
标准浏览器采用事件捕获的方式对应 IE 的事件冒泡机制(即标准由最外元素至最内元素或者 IE 由最内元素到最外元素)最后标准方亦觉得 IE 这方面的比较合理,所以便将事件冒泡纳入了标准,这也是addEventListener
第三个参数的由来,而且事件冒泡作为了默认值第三值,默认false,表示事件冒泡方式。
如果浏览器不支持addEventListener()
方法,你可以使用attachEvent()
方法替代。
以下实例演示了跨浏览器的解决方法:
var x = document.getElementByld ( "myBtn");
if (x.addEventListener){
//所有主流浏览器,ie9+
x.addEventListener("click", myFunction);
}