浏览器内核
常见的浏览器内核可以分四种:Trident、Gecko、Blink、Webkit
- IE 浏览器:Trident 内核,也称为 IE 内核
- edge 浏览器 Webkit Chrome
- Chrome 浏览器:WebkitChrome
- Firefox 浏览器:Gecko 内核,俗称 Firefox 内核
- Safari 浏览器:Webkit 内核
- Opera 浏览器:最初是自己的 Presto 内核,后来加入谷歌大军,
常见的兼容性问题:
- 1.不同浏览器的标签默认的 margin,padding 不同
- css 里增加通配符*{margin:0;padding:0}
- 2.IE6 双边距问题;在 IE6 中设置了 float,同时又设置 margin,就会出现边距问题
- 设置 display:inline;
- 3.当标签的高度设置小于 10px,在 IE6、IE7 中会超出自己设置的高度
- 超出高度的标签设置 overflow:hidden,或者设置 line-height 的值小于你的设置高度
- 4.图片默认有间距
- 使用 float 为 img 布局
- 5.cursor:hand 显示手型在 safari 上不支持
- 统一使用 cursor:pointer
- 6.event.srcElement 问题
- 问题说明:IE 下,event 对象有 srcElement 属性,但是没有 target 属性;Firefox 下,event 对象有 target 属性,但是没有 srcElement 属性。
- 使用 srcObj = event.srcElement?event.srcElement:event.target;
- 7.事件绑定
- IE:dom.attachEvent(); 其他浏览器:dom.addEventListener();
- 标准浏览器采用事件捕获的方式对应 IE 的事件冒泡机制
- 8.innerText 在 IE 中能正常工作,但在 FireFox 中却不行.
1
2
3
4
5if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
} - 9.CSS 透明
- IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
- FF:opacity:0.6。
- 10.FF 和 IEBOX 模型解释不一致导致相差 2px
- ie 理解为 box.width =100
- ff 理解为 box.width =100 + 1*2 = 102 //加上边框 2px
- div{margin:30px!important;margin:28px;}
- ie 不能识别!important
- 11.IE5 和 IE6 的 BOX 解释不一致
- IE5 下 div{width:300px;margin:0 10px 0 10px;}
1
div 的宽度会被解释为300px-10px(右填充)-10px(左填充),最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
- IE5 下 div{width:300px;margin:0 10px 0 10px;}
- 12.元素水平居中问题
+FF: margin:0auto;
-IE: 父级{ text-align:center; } - 13.Div 的垂直居中问题
- vertical-align:middle; 将行距增加到和整个 DIV 一样高:line-height:200px;然后插入文字,就垂直居中了。缺点是要控制内容不要换行。