chrome-Firefox-IE浏览器兼容总结

作为一名WEB前端程序员,相信每个人对浏览器的兼容都"情有独钟",下面就一些常用的浏览器的兼容列举一二。

一、块级元素（block）一般不转化为inline-block,其实是因为浏览器的兼容问题，IE8以下的浏览器不支持块级元素转化为行内块元素(可以使用浮动)。

二.获取元素样式:
1.oDiv.style.background:
　　获取到的是行内样式的属性
2.获取显示的样式:
　　标准浏览器(IE9以下是不支持):
　　　　getComputedStyle(标签元素,false).属性名
　　IE9以下获取内联样式:
　　　　标签元素.currentStyle.属性名

　　做浏览器的兼容:
　　if (oDiv.currentStyle) {
　　　　//在IE9以下
　　　　oDiv.currentStyle.width;
　　} else {
　　　　//标准浏览器
　　　　getComputedStyle(oDiv,false).width;
　　}

3.oDiv.offset.width=100;注意：不带'px'，上面两个获取的带'px'

三.获取兄弟节点
　　nextSibling,previousSibling
　　在高级和IE9以上的浏览器里面,兄弟节点会获取到空格,在IE8以下,才能获取到我们想要的元素节点

　　previousElementSibling,nextElementSibling
　　在高级和IE9以上的浏览器里面,兄弟节点会获取到对应的元素,在IE8以下,不能获取到我们想要的元素节点

　　var oP1 = oP.previousElementSibling || oP.previousSibling;

四.获取第一个或最后的兄弟节点
　　获取节点,获取第一个节点,获取最后一个节点
　　父节点.firstChild;
　　父节点.lastChild;
　　1.兼容所有的浏览器
　　　　oUl.firstElementChild || oUl.firstChild
　　2.兼容所有的浏览器
　　　　oUl.lastElementChild || oUl.lastChild

五.向上滚动的距离:
　　1.在谷歌里面:
　　　　document.body.scrollTop
　　2.在火狐、IE里面:
　　　　document.documentElement.scrollTop
　　3.兼容所有浏览器:
　　　　var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
　　　　var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;

六、事件绑定的兼容
　　if (obj.addEventListener) {
　　　　//在高级浏览器
　　　　obj.addEventListener(type,fn,false);
　　} else {
　　　　obj.attachEvent('on'+type,fn)
　　}
　　事件移除的兼容
　　if (obj.removeEventListener) {
　　　　obj.removeEventListener(type,fn,false);
　　} else {
　　　　obj.detachEvent('on'+type,fn);
　　}

七、阻止默认事件的兼容
　　function(evt) {
　　　　var oEvent = evt || event;
　　　　oEvent.preventDefault && oEvent.preventDefault();
　　　　return false;
　　}

八、事件委托兼容
　　srcElement: 获取到事件真正作用的那个元素 (不兼容Firefox,专门用来做IE浏览器的兼容)
　　target: 获取到事件真正作用的那个元素（兼容高级浏览器）
　　var oLi = oEvent.srcElement || oEvent.target;

　　addEvent('oUl','click',function(evt){

　　　　var oEvent=evt||event;

　　　　var oLi=oEvent.srcElement||oEvent.target;

　　})

chrome-Firefox-IE浏览器兼容总结相关推荐

IE内嵌google chrome frame解决浏览器兼容问题
IE内嵌google chrome frame解决浏览器兼容问题参考文章: (1)IE内嵌google chrome frame解决浏览器兼容问题 (2)https://www.cnblogs.co ...
CSS IE7 IE6 Firefox多浏览器兼容(转摘）
http://www.keephelp.com/css/divcss-ie7-ie6-firefox-1/ 在理想的环境中,编写正确的CSS会在支持CSS的每个浏览器中正常工作.不幸的是,我们并不是生 ...
CSS IE7 IE6 Firefox多浏览器兼容
在理想的环境中,编写正确的CSS会在支持CSS的每个浏览器中正常工作.不幸的是,我们并不是生活在理想的世界中,浏览器有不少的Bug和不一致的地方.为了创建能够在各种浏览器上显示相同样式的页面,CSS开 ...
chrome+firefox+ie浏览器驱动下载
一.chromedriver.exe的下载:http://chromedriver.storage.googleapis.com/index.html 将chromedriver.exe所在文件路径追 ...
WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【01】
#兼容问题目录 1.IE6下怪异盒模型 2.IE6下最小高度问题 3.IE6下不支持1px的点线 4.IE6下内容会把父级的高度撑开 5.IE6下只支持给a标签添加伪类 6.IE67下不支持给块标签加 ...
WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【03】
#兼容问题目录 16.IE67下子级有相对定位,并且比父级要大.那父级overflow:hidden;后是包不住它的 17.IE6下同一层级的浮动元素会盖住绝对定位元素 18.IE6下定位父级的宽高是 ...
WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【02】
#兼容问题目录 8.IE6不支持固定定位 9.IE6下前面元素浮动,后面元素不浮动后他们之间会有间隙 10.IE6下双边距问题 11.IE67下父级有边框,子级有margin的话会不起作用 12.IE ...
Chrome\Firefox\IE浏览器驱动下载地址
浏览器驱动下载: 1)Chrome chrome的webdriver:http://npm.taobao.org/mirrors/chromedriver/ chromedriver与chrome版本 ...
兼容IE，chrome 等所有浏览器回到顶部代码
今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非IE浏览器下可以运行,在IE浏览器下却运行不了. 故将其代码搬弄过来做了些许修改后,完美支持了IE下的运行. 主要实现功能代码文件: & ...
在Chrome、Firefox等浏览器中实现低延迟播放海康、大华RTSP
现在到处是摄像头的时代,随着网络带宽的不断提速和智能手机的普及催生出火热的网络直播行业,新冠病毒的大流行又使网络视频会议系统成为商务会议的必然选择,因此RTSP实时视频流播放及处理不再局限于安防行业. ...

chrome-Firefox-IE浏览器兼容总结

作为一名WEB前端程序员,相信每个人对浏览器的兼容都"情有独钟",下面就一些常用的浏览器的兼容列举一二。

chrome-Firefox-IE浏览器兼容总结相关推荐

最新文章

热门文章