zoukankan      html  css  js  c++  java
  • firefox和IE浏览器兼容问题

    1.集合类对象问题
    说明:IE下,可以使用()或[]获取集合类对象;
    Firefox下,只能使用[]获取集合类对象.
    解决方法:统一使用[]获取集合类对象.
    2.HTML对象获取问题
    FireFox:document.getElementById("idName");
    ie:document.idname或者document.getElementById("idName").
    解决办法:统一使用document.getElementById("idName");
    3.const问题
    说明:Firefox下,可以使用const关键字或var关键字来定义常量;
    IE下,只能使用var关键字来定义常量.
    解决方法:统一使用var关键字来定义常量.
    4.window.event问题
    说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.Firefox必须从源处加入event作参数传递。Ie忽略该参数,用window.event来读取该event。
    解决方法:
    IE&Firefox:
    Submitted(event)"/> …
    <scrīpt>
    function Submitted(evt) {
    evt=evt?evt:(window.event?window.event:null);
    }
    </scrīpt>
    5.event.xevent.y问题
    说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;
    Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
    解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
    6.event.srcElement问题
    说明:IE下,event对象有srcElement属性,但是没有target属性;
    Firefox下,even对象有target属性,但是没有srcElement属性.
    解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target. 请同时注意event的兼容性问题。

    7.window.location.href问题
    说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
    Firefox1.5.x下,只能使用window.location.
    解决方法:使用window.location来代替window.location.href.

    8.
    模态和非模态窗口问题
    说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
    解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
    如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.
    例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

    9.frame问题
    以下面的frame为例:
    <frame src="xxx.html" />

    (1)访问frame对象:
    IE:使用window.frameId或者window.frameName来访问这个frame对象. frameId和frameName可以同名。
    Firefox:只能使用window.frameName来访问这个frame对象.
    另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.

    (2)切换frame内容:
    在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
    如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame),可以在frme中使用parent来访问父窗口。例如:parent.document.form1.filename.value="Aqing";

    10.body问题
    Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在.

    11. 事件委托方法
    IE:document.body.onload = inject; //Function inject()在这之前已被实现
    Firefox:document.body.onload = inject();

    12.firefox与IE的父元素(parentElement)的区别
    IE:obj.parentElement
    firefox:obj.parentNode
    解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.

    13.cursor:hand VS cursor:pointer
    firefox不支持hand,但ie支持pointer
    解决方法: 统一使用pointer

    14.innerTextIE中能正常工作,但是innerTextFireFox中却不行. 需用textContent
    解决方法:
    if(navigator.appName.indexOf("Explorer") > -1){
    document.getElementById('element').innerText= "my text";
    } else{
    document.getElementById('element').textContent = "my text";
    }

    15.FireFox中设置HTML标签的style时,所有位置性和字体尺寸的值必须后跟px。这个ie也是支持的。

    16. ie,firefox以及其它浏览器对于 table 标签的操作都各不相同,
    在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChild方法也不管用。
    解决方法:
    //向table追加一个空行:
    var row = otable.insertRow(-1);
    var cell =document.createElement("td");
    cell.innerHTML = " ";
    cell.className = "XXXX";
    row.appendChild(cell);

    17. padding 问题
    padding 5px 4px 3px 1pxFireFox无法解释简写,
    必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

    18. 消除ul、ol等列表的缩进时
    样式应写成:list-style:none;margin:0px;padding:0px;
    其中margin属性对IE有效,padding属性对FireFox有效

    19. CSS透明
    IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
    FF:opacity:0.6。

    20. CSS圆角
    IE:不支持圆角。
    FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。

    21. CSS双线凹凸边框
    IE:border:2px outset;。
    FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
    22. selectoptions集合操作
    枚举元素除了[]外,SelectName.options.item()也是可以的, 另外SelectName.options.length, SelectName.options.add/remove都可以在两种浏览器上使用。注意在add后赋值元素,否则会失败(本人试验如此)。

    23. XMLHTTP的区别
    //mf
    if (window.XMLHttpRequest) //mf
    {
    xmlhttp=new XMLHttpRequest()
    xmlhttp.onreadystatechange=xmlhttpChange
    xmlhttp.open("GET",url,true)
    xmlhttp.send(null)
    }
    //ie
    else if (window.ActiveXObject) // code for IE
    {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
    if (xmlhttp)
    {
    xmlhttp.onreadystatechange=xmlhttpChange
    xmlhttp.open("GET",url,true)
    xmlhttp.send()
    }
    }
    }
    24.css中的widthpadding
    在IE7和FF中width宽度不包括padding,在Ie6中包括padding.

  • 相关阅读:
    联想 Vibe Shot(Z90-3) 免recovery 获取ROOT权限 救砖 VIBEUI V3.1_1625
    联想 Z5S(L78071)免解锁BL 免rec 保留数据 ROOT Magisk Xposed 救砖 ZUI 10.5.370
    联想 Z5(L78011) 免解锁BL 免rec 保留数据 ROOT Magisk Xposed 救砖 ZUI 10.5.254
    联想 S5 Pro(L78041)免解锁BL 免rec 保留数据 ROOT Magisk Xposed 救砖 ZUI 5.0.123
    第二阶段 冲刺八
    第二阶段 冲刺七
    第二阶段 冲刺六
    第二阶段 冲刺五
    代码大全阅读笔记03
    学习进度十二
  • 原文地址:https://www.cnblogs.com/cuiwenke/p/1688415.html
Copyright © 2011-2022 走看看