phphtmljs避免出现兼容的方法.docx

避免出现兼容性的方法总结一、document.formName.item(”itemName”) 问题 问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements elementName；Firefox 下，只能使用document.formName.elementselementName。 解决方法：统一使用document.formName.elementselementName。 二、集合类对象问题 问题说明：IE下，可以使用 () 或 获取集合类对象；Firefox下，只能使用 获取集合类对象。 解决方法：统一使用 获取集合类对象。 三、自定义属性问题 问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。 解决方法：统一通过 getAttribute() 获取自定义属性。 四、eval(”idName”)问题 问 题说明：IE下，可以使用 eval(”idName”) 或 getElementById(”idName”) 来取得 id 为 idName 的HTML对象；Firefox下，只能使用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。 解决方法：统一用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。 五、变量名与某HTML对象ID相同的问题 问题说明：IE下，HTML对象的ID可以作为 document 的下属对象变量名直接使用，Firefox下则不能；Firefox下，可以使用与HTML对象ID相同的变量名，IE下则不能。 解决方法：使用 document.getElementById(”idName”) 代替 document.idName。最好不要取HTML对象ID相同的变量名，以减少错误；在声明变量时，一律加上var关键字，以避免歧义。 六、const问题 问题说明：Firefox下，可以使用const关键字或var关键字来定义常量；IE下，只能使用var关键字来定义常量。 解决方法：统一使用var关键字来定义常量。 七、input.type属性问题 问题说明：IE下 input.type 属性为只读；但是Firefox下 input.type 属性为读写。 解决办法：不修改 input.type 属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。 八、window.event问题 问题说明：window.event 只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的event只能在事件发生的现场使用。 解决方法：在事件发生的函数上加上event参数，在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null) 示例： function doSomething(evt) var myEvent = evt?evt:(window.event?window.event:null) . 九、event.x与event.y问题 问题说明：IE下，even对象有x、y属性，但是没有pageX、pageY属性；Firefox下，even对象有pageX、pageY属性，但是没有x、y属性。 解决方法：var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY; 如果考虑第8条问题，就改用myEvent代替event即可。 十、event.srcElement问题 问题说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。 解决方法：使用srcObj = event.srcElement ? event.srcElement : event.target; 如果考虑第8条问题，就改用myEvent代替event即可。 十一、window.location.href问题 问题说明：IE或者Firefox2.0.x下，可以使用window.location或window.location.href；Firefox1.5.x下，只能使用window.location。 解决方法：使用 window.location 来代替 window.location.href。当然也可以考虑使用 location.replace()方法。 十二、模态和非模态窗口问题 问题说明：IE下，可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；Firefox下则不能。 解决方法：直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。 如 果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问父窗口。如果需要父窗口控制子窗口的话，使用 var subWindow = window.open(pageURL,name,parameters); 来获得新开的窗口对象。 十三、frame和iframe问题 以下面的frame为例： (1)访问frame对象 IE：使用window.frameId或者window.frameName来访问这个frame对象； Firefox：使用window.frameName来访问这个frame对象； 解决方法：统一使用 window.document.getElementById(”frameId”) 来访问这个frame对象； (2)切换frame内容 在 IE和Firefox中都可以使用 window.document.getElementById(”frameId”).src = “.html”或 window.frameName.location = “.html”来切换frame的内容； 如果需要将frame中的参数传回父窗口，可以在frame中使用parent关键字来访问父窗口。 十四、body载入问题 问题说明：Firefox的body对象在body标签没有被浏览器完全读入之前就存在；而IE的body对象则必须在body标签被浏览器完全读入之后才存在。 注 这个问题尚未实际验证，待验证后再来修改。 注 经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。 十五、事件委托方法 问题说明：IE下，使用 document.body.onload = inject; 其中function inject()在这之前已被实现；在Firefox下，使用 document.body.onload = inject(); 解决方法：统一使用 document.body.onload=new Function(inject(); 或者 document.body.onload = function()/* 这里是代码 */ 注意 Function和function的区别 十六、访问的父元素的区别 问题说明：在IE下，使用 obj.parentElement 或 obj.parentNode 访问obj的父结点；在firefox下，使用 obj.parentNode 访问obj的父结点。 解决方法：因为firefox与IE都支持DOM，因此统一使用obj.parentNode 来访问obj的父结点。 十七、innerText的问题. 问题说明：innerText在IE中能正常工作，但是innerText在FireFox中却不行。 解决方法：在非IE浏览器中使用textContent代替innerText。 示例： if(navigator.appName.indexOf(Explorer) -1) document.getElementById(element).innerText = my text; else document.getElementById(element).textContent = ;my text; 注 innerHTML 同时被ie、firefox等浏览器支持，其他的，如outerHTML等只被ie支持，最好不用。 十八、Table操作问题 问 题说明：ie、firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。 document.appendChild在往表里插入行时FIREFOX支持，IE不支持 解决办法：把行插入到TBODY中，不要直接插入到表 解决方法： /向table追加一个空行： var row = otable.insertRow(-1); var cell = document.createElement(td); cell.innerHTML = ; cell.className = XXXX; row.appendChild(cell); 注 建议使用JS框架集来操作table，如JQuery。 十九、对象宽高赋值问题 问题说明：FireFox中类似 obj.style.height = imgObj.height 的语句无效。 解决方法：统一使用 obj.style.height = imgObj.height + px; 二十、setAttribute(style,color:red;) FIREFOX支持(除了IE，现在所有浏览器都支持)，IE不支持 解决办法：不用setAttribute(style,color:red) 而用object.style.cssText = color:red;(这写法也有例外) 最好的办法是上面种方法都用上，万无一失 二十一、类名设置 setAttribute(class,styleClass) FIREFOX支持，IE不支持(指定属性名为class，IE不会设置元素的class属性，相反只使用setAttribute时IE自动识CLASSNAME属性) 解决办法： setAttribute(class,styleClass) setAttribute(className,styleClass) 或者直接 object.className=styleClass; IE和FF都支持object.className。 二十二、用setAttribute设置事件 var obj = document.getElementById(objId); obj.setAttribute(onclick,funcitonname();); FIREFOX支持，IE不支持 解决办法： IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数 如下： var obj = document.getElementById(objId); obj.onclick=function()fucntionname(); 这种方法所有浏览器都支持 二十三、建立单选钮 IE以外的浏览器 var rdo = document.createElement(input); rdo.setAttribute(type,radio); rdo.setAttribute(name,radiobtn); rdo.setAttribute(value,checked); IE: var rdo =document.createElement(”); 解决办法： 这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了 万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。 二十四、cursor:hand VS cursor:pointerfirefox不支持hand，但ie支持pointer解决方法: 统一使用pointer二十五、padding 问题padding 5px 4px 3px 1px FireFox无法解释简写,必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;FireFox设置Padding属性后会相应的增加Width和Height属性值，IE不会解决办法：用!important方法多定义一套Height和Width二六、消除ul、ol等列表的缩进时样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效二七、CSS透明IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。FF：opacity:0.6。二八、 CSS圆角IE：不支持圆角。解决方案如下：技术解决CSS+Jquery实现页面圆角框 附百度文库代码参考连接：/view/2d0751bef121dd36a32d8220.htmlIE利用VML矢量可标记语言作为画笔绘出圆角：下载一个压缩包ie-css3.htc，里面有一个微软的脚本文件（11KB）和一个用来测试服务器是否有正确的Content-Type的 HTML文件，.htc 文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素 上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。使用演示：.mainborder: 2px solid #C0C0C0;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;position:relative;z-index:100;behavior: url(此处为ie-css3.htc文件的绝对路径);Webkit内核的浏览器支持“-webkit-border-radius: 10px;”属性（10px是圆角半径），可以直接解析出圆角；Firefox浏览器支持“-moz-border-radius: 10px;”属性，也是可以直接解析出圆角；IE系浏览器则需要加上“border-radius: 15px;”的属性。注意：1、behavior的url里一定要填写ie-css3.htc的绝对路径，因为 IE浏览器找该文件是相对当前html文件路径来找的，所以对于Wordpress等动态程序生成的页面一定要填写绝对路径。2、一定要有定位属性：position:relative;3、因为在IE浏览器下这些CSS3效果的实现是要借助于VML，由VML绘制圆角或是投影效果，所以还需要一个z-index属性。z-index属性最好设置得比较大，如2。4、如果在IE浏览器下某些模块无法用此渲染，可以试着绝对定位相应的层，即加上“ width: 400px; height:400px;”属性。5、radius属性的10px是圆角半径，还可以给两个值如“border-radius:10px 5px;”，这样则左上角与右下角半径为10px，右上角与左下角半径为5px。也可以赋4个值，为“上 右 下 左”。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;。二九、 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;三十、 对select的options集合操作枚举元素除了外，SelectName.options.item()也是可以的, 另外SelectName.options.length, SelectName.options.add/remove都可以在两种浏览器上使用。注意在add后赋值元素，否则会失败（本人试验如此）。三十一、XMLHTTP的区别/mfif (window.XMLHttpRequest) /mfxmlhttp=new XMLHttpRequest()xmlhttp.onreadystatechange=xmlhttpChangexmlhttp.open(GET,url,true)xmlhttp.send(null)/ieelse if (window.ActiveXObject) / code for IExmlhttp=new ActiveXObject(Microsoft.XMLHTTP) if (xmlhttp) xmlhttp.onreadystatechange=xmlhttpChange xmlhttp.open(GET,url,true) xmlhttp.send() 三十二、innerHTML的区别Firefox不支持innerHTML, 解决办法可以如下 rng = document.createRange(); el = document.getElementById(elementid); rng.setStartBefore(el); htmlFrag = rng.createContextualFragment(content); while (el.hasChildNodes() /清除原有内容，加入新内容 el.removeChild(el.lastChild); el.appendChild(htmlFrag);三十四、FireFox对div与div之间的空格是忽略的，但IE是处理的；因此尽量在两个相连的div之间不要有空格和回车，否则可能会造成不同浏览器之间格式不正确，比如著名的3px偏差；而且原因很难查明三十五、IE6由于默认行高问题无法定义1px左右高度的容器解决办法：在CSS中对容器设置如：overflow:hidden | zoom:0.08 | line-height:1px三十六、支持WEB标准的浏览器设置了固定高度值就不会像IE6那样被撑开，但是又想设置固定高度又想能够被撑开呢?解决办法是去掉height属性而设置min-height，为了兼容不支持min-height的IE6可以这样定义：height:auto!important;height:200px;min-height:200px;三十七、IE6下两个层中间有空隙解决办法：设置右侧div也同样浮动float:left或者相对IE6定义 margin-right:-3px;三十八、浮动后IE6解释外边距为实际边距的双倍解决办法：加上display:inline三十九、关于document.allFirefox可以兼容document.all， 但会生成一条警告。可以用getElementById(*) 或者 getElementByTagName(*)来代替不过对于document.all.length等属性，则完全不兼容。大家尽量不要使用document.all属性.四十、img的src刷新问题在IE 下可以用 可以刷新图片，但在FireFox下不行。主要是缓存问题，在地址后面加个随机数就解决了:1. myImg.src=this.src+?+Math.random();myImg.src=this.src+?+Math.random();四十一、childNodes获取的节