zoukankan      html  css  js  c++  java
  • IE和firefox的区别

    1.document.formName.item("itemName") 问题
    说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];Firefox下,只能使用document.formName.elements["elementName"].
    解决方法:统一使用document.formName.elements["elementName"].

    2.集合类对象问题
    说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
    解决方法:统一使用[]获取集合类对象.

    3.自定义属性问题
    说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
    解决方法:统一通过getAttribute()获取自定义属性.

    4.eval("idName")问题
    说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
    解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.

    5.变量名与某HTML对象ID相同的问题
    说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
    解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.

    7.input.type属性问题
    说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.

    9.event.x与event.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.

    10.event.srcElement问题
    说明:IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.
    解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.

    13.frame问题
    以下面的frame为例:
    <frame src="xxx.html" id="frameId" name="frameName" />

    (1)访问frame对象:
    IE:使用window.frameId或者window.frameName来访问这个frame对象.
    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中的参数传回父窗口,可以在frme中使用parent来访问父窗口。例如:parent.document.form1.filename.value="Aqing";

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

    例如:
    Firefox:
    <body>
    <script type="text/javascript">
    document.body.onclick = function(evt){
    evt = evt || window.event;
    alert(evt);
    }
    </script>
    </body>
    IE&Firefox:
    <body>
    </body>
    <script type="text/javascript">
    document.body.onclick = function(evt){
    evt = evt || window.event;
    alert(evt);
    } </script>

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

    Firefox:document.body.onload = inject();

    有人说标准是:
    document.body.onload=new Function('inject()');

    16. firefox与IE(parentElement)的父元素的区别
    IE:obj.parentElement
    firefox:obj.parentNode

    解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.

    17.innerText在IE中能正常工作,但是innerText在FireFox中却不行.
    解决方法:
    if(navigator.appName.indexOf("Explorer") > -1){

    document.getElementById('element').innerText = "my text";

    } else{

    document.getElementById('element').textContent = "my text";

    }

    18. FireFox中类似 obj.style.height = imgObj.height 的语句无效
    解决方法:
    obj.style.height = imgObj.height + 'px';

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

    20. padding 问题
    padding 5px 4px 3px 1px FireFox无法解释简写,

    必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

    21. 消除ul、ol等列表的缩进时
    样式应写成:list-style:none;margin:0px;padding:0px;

    其中margin属性对IE有效,padding属性对FireFox有效

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

    FF:opacity:0.6。

    23. 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;。

    24. 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;

    25.ie支持document.all 而firefox 不支持
    改用下面三个tag的其中一个来代替document.all
    getElementsByTagName("tagName") 可以得到得到所有标签元素的集合
    getElementById("idName") 可以按id得到某一元素
    getElementsByName("Name") 可以得到按name属性得到某一元素

    26、firefox 中使用innerHTML 的方法
    <div id="online"></div>
    document.all.online.innerHTML; //这种方法在IE中可以使用,但不是标准方法
    document.getElementById("online").innerHTML; //这样firefox就能使用innerHTML了

    27、eval()与window.execScript()执行脚本
    IE、firerox均支持eval(),firefox不支持window.execScript()

    解决:统一使用eval()

    28、对事件处理函数的重写
    解决:(例):如对document的onclick()重写,统一使用document.onclick = function(){…}


    --------------------------------------------------------------------------------------

    学习了,补充点!
    1、setAttribute
    FF:setAttribute('class',value)
    IE:setAttribute('className',value)
    FF:setAttribute('style',value)
    IE:domObj.style.cssText=value
    2、getElementsByName IE也会返回id等于给定名称的元素
    3、getElementById 对于给定的ID匹配某个元素的name属性,IE还会返回这个元素
    3.Table的insertRow()方法对于IE可以不用传递参数,但是对于FireFox必须传递。
    4.var s = 'asldjljflasjdlfjsadljflkjasldjfl\
    sajddajflsjdflajfdlkjsadf\
    askdjflsajdlfkjsalkfdjsalkd';
    换行\
    5.对于table里的td里面如果没有内容,那么IE显示就有问题。
    6.IE:获取事件鼠标位置时,IE用的是event.x和event.y,并且值在不加单位的情况下可以直接使用,IE提供默认单位;

      div.style.left = event.x

      div.style.top = event.y

      此时,div显示的位置为鼠标的位置。

      FF:获取事件鼠标位置时,Firefox用的是MouseEvent.pageX和MouseEvent.pageY,并且在不加单位的情况下直接赋值后,无效;必须添加单位。

      div.style.left = MouseEvent.pageX

      div.style.top = MouseEvent.pageY

      此时,div显示的位置为0,0.

      建议:都添加单位,无论针对IE或者Firefox都有效。

      IE:div.style.left = event.x+'px'

      div.style.top = event.y+'px'

      FF:div.style.left = MouseEvent.pageX+'px'

      div.style.top = MouseEvent.pageY+'px'

    7.String没有trim()方法,而在firefox中提供了实现。IE中没有。
    8.IE中Date.parse函数,对于这种'2010-10-01'格式的日期,IE返回NaN,FireFox正常解析;
    对于10/01/2010这种格式两种浏览器通用。
    9.对与String对象的补充两种方法:
    String.prototype.trim=function(){
    var reExtraSpace=/^\s+(.*?)\s$/;
    return this.replace(reExtraSpace,'$1');
    }

    String.prototype.replaceAll=function(s1,s2){
    return this.replace(new RegExp(s1,"gm"),s2);
    }
    =====================================================================================

    1:innerText
    IE支持,FIREFOX不支持
    解决办法:用innerHTML,2种浏览器都识别innerHTML
    2:document.createElement
    document.appendChild
    在往表里插入行时
    FIREFOX支持,IE不支持
    解决办法:把行插入到TBODY中,不要直接插入到表
    3:setAttribute('style','color:red;')
    FIREFOX 支持(除了IE,现在所有浏览器都支持),IE不支持
    解决办法:不用setAttribute('style','color:red')
    而用object.style.cssText = 'color:red;'(这写法也有例外)
    最好的办法是上面种方法都用上,万无一失 ^_^
    4:class
    setAttribute('class','styleClass')
    FIREFOX 支持,IE不支持(指定属性名为CLASS,IE不会设置元素的CLASS属性,相反只使用SETATTRIBUTE时IE自动识别CLASSNAME属性)
    解决办法:
    setAttribute('class','styleClass')
    setAttribute('className','styleClass')
    2 种都用上
    5:用setAttribute设置事件
    var obj = document.getElementById('objId');
    obj.setAttribute('onclick','funcitonname();');
    FIREFOX 支持,IE不支持
    解决办法:
    IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
    如下:
    var obj = document.getElementById('objId');
    obj.onclick=function(){fucntionname();};
    这种方法所有浏览器都支持
    6:建立单选钮
    IE以外的浏览器
    var rdo = document.createElement('input');
    rdo.setAttribute('type','radio');
    rdo.setAttribute('name','radiobtn');
    rdo.setAttribute('value','checked');
    IE:
    var rdo =document.createElement("<input type='radio' name='radiobtn' value='checked'>");
    解决办法:
    这一点区别和前面的都不一样。这次完全不同,所以找不到共同的办法来解决,那么只有IF-ELSE了
    万幸的是,IE可以识别出document的uniqueID属性,别的浏览器都不可以识别出这一属性。问题解决。
    0:共同的一些技巧
    在动态建立INPUT型输入元素时,一般是先加入,在设置TYPE。这就有可能出错
    好习惯:var btn = document.createElement('input');
    btn.setAttribut('type','button');
    document.getElementById('formId').appendChild(btn);

  • 相关阅读:
    BestCoder17 1001.Chessboard(hdu 5100) 解题报告
    codeforces 485A.Factory 解题报告
    codeforces 485B Valuable Resources 解题报告
    BestCoder16 1002.Revenge of LIS II(hdu 5087) 解题报告
    codeforces 374A Inna and Pink Pony 解题报告
    codeforces 483B Friends and Presents 解题报告
    BestCoder15 1002.Instruction(hdu 5083) 解题报告
    codeforces 483C.Diverse Permutation 解题报告
    codeforces 483A. Counterexample 解题报告
    NSArray中地内存管理 理解
  • 原文地址:https://www.cnblogs.com/xiurui12345/p/2505464.html
Copyright © 2011-2022 走看看