javascript(js)和css相容IE和FireFox(FF)

一切為了相容IE和FF，歡迎補充，

js和css相容IE和FireFox(FF)<br />(說明:下面凡說w3c代表Firefox,Chrome,Safari,Opera，FF則代表Firefox)<br />目前版本Firefox3.5,Chrome3.0,Safari4.0.3,Opera 9.64<br />(最後修改日期2009-11-17)<br />css:<br />1.<br />ul標籤中FF中有個padding值，卻沒有margin值，而在IE中正好相反<br />解決辦法:將ul的padding和margin都設為0(也可以不是0)如：padding:0;margin:0;list-style:none;<br />另外form預設在IE中也會有margin值，所以最好也將其margin和padding設為0</p><p>2.<br />ie中cursor:hand可以將滑鼠設為手形，w3c不行，<br />解決：都用cursor:pointer</p><p>3、置中問題<br />ie需要將父視窗:text-align:center;而ff則是margin-left:auto;margin-right:auto;</p><p>4.IE和FF盒模型有區別，所以有需要特殊設定<br />IE Box的寬度是margin+width (IE的border和padding包含在width內)<br />FF Box的寬度是margin+width+border+padding<br />FF: 支援 !important（優先解析）， IE 則忽略， 可用 !important 為 FF 特別設定樣式<br />width:600px !important;//這個要放在前面才行<br />width:598px;<br />另外：傳說IE7會奇怪的支援!important，IE tester v0.4.2下測試無效;<br />ie下：offsetWidth=width;clientWidth=width-border<br />ff下:ofsetWidth=width+padding+border;clientWidth=width+padding;</p><p>5.<br />IE6中在設定float的div中margin會加倍，解決辦法：div裡面加上display:inline;</p><p>6.透明濾鏡：<br />IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=30);<br />W3c：opacity:0.3;<br />或者：<br />IE：filter:alpha(opacity=60);<br />FF：-moz-opacity:0.6;/*已淘汰，用上面的opacity代替*/</p><p>7.禁用選擇<br />非ff中:使用js，onselectstart="return false;";<br />FF:使用CSS，-moz-user-select:none;</p><p>8：圓角：<br />FF中：-moz-border-radius: 5px;<br />其它支援:-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;</p><p>js:<br />1.<br />IE中innerText在w3c中沒有，使用textContent;<br />eg:<br />var obj=document.getElementById("_td");<br />var text;<br />if(obj.innerText) {<br />text=obj.innerText;<br />} else if(obj.textContent) {<br />text=obj.textContent;<br />}<br />（DHTML手冊說innerText不能用在tr，td等節點上，不過我之前明明用過的，然後昨天在測試別人的頁面時用上面的方法IE取不到值，有哪位知道的希望告知下，在什麼情況下不能使用innerText）<br />2.<br />在Ajax中返回對象狀態IE可以使用readystate但是在W3c中必須為readyState，所以最好是都寫成readyState</p><p>3.擷取IE和w3c中的鍵盤傳回值，w3c使用e.keyCode和e.which來取按索引值<br />另外keypress事件比較特殊，現測試如下：<br />IE:<br />keypress:letter(65-90,97-122),digit(48-57),enter(13),Esc(27)不支援backspace(8)，del(46),insert(45),Move(35-40)，F1-F12(111-123)</p><p>FF3.5:<br />keypress:<br />e.which:letter(65-90,97-122),digit(48-57),enter(13),backspace(8)不支援Esc(27),F1-F12(111-123)，del(46),insert(45),Move(35-40)<br />e.keyCode:Esc(27),F1-F12(111-123),enter(13),backspace(8)，del(46),insert(45),Move(35-40) 不支援letter(65-90,97-122),digit(48-57)，</p><p>Chrome3.0:<br />keypress:<br />e.which和e.keyCode:letter(65-90,97-122),digit(48-57),enter(13),不支援backspace(8),Esc(27),F1-F12(111-123),，del(46),insert(45),Move(35-40)</p><p>4.為對象添加移除事件<br />var obj=document.getElementById("_tname');<br />添加事件:<br />if(obj.attachEvent) {<br />obj.attachEvent("onchange",function() {//for IE<br />otherfunction(params);//這裡可以給其實方法傳參，也可以直接調用其它方法<br />});<br />} else if(obj.addEventListener) {//for W3c<br />obj.addEventListener("change",function() {<br />otherfunction(params);<br />},false);<br />}<br />移除事件：<br />obj.onclick=null;<br />or<br />if(obj.detachEvent) {<br />obj.detachEvent("onchange",test);<br />} else if(obj.removeEventListener) {<br />obj.removeEventListener("change",test,false);<br />}</p><p>5.<br />事件位置<br />通用：<br />screenX,screenY:滑鼠在顯示螢幕上的座標<br />clientX,clientY:滑鼠在頁面可見地區的座標<br />IE:<br />e.x,e.y 相對於可見地區的座標(今天ie8，及ie testerv0.4.2下測試)，設定為position:relative時與e.layerX相同（即與e.offsetX只有邊框的差距），<br />e.offsetX,e.offsetY 滑鼠相對於父元素的的位置(不包含邊框，與設定position為absolute或者relative的layerX只有邊框的差距）<br />w3c:<br />e.pageX,e.pageY 滑鼠在頁面上的位置<br />e.layerX,e.layerY 滑鼠相對於“觸發事件的元素的層級關係中離該元素最近的，設定了position的父元素”的邊界的位置，layerX從border的左上方開始定位，即如果這個父元素存在border，則座標原點在border的左上方，而不是內容地區的左上方(如果未設定position為absolute或者relative，此位置表示相對於頁面最左邊的距離)</p><p>clientY+ 捲軸滾去的高度= pageY</p><p>6.IE下 input.type屬性為唯讀，但是FF下可以修改</p><p>7.在 IE 中，getElementsByName()、(document.all[name] (還未測試成功))均不能用來取得 div元素（是否還有其它不能取的元素還不知道）。</p><p>8.通過js來觸發事件<br /><script type="text/javascript"><br /> function handerToClick(){<br />var obj=document.getElementById("btn1");<br />if(document.all){//IE中<br /> obj.fireEvent("onclick");<br />}else{//W3c<br />var e=document.createEvent('MouseEvent');<br />e.initEvent('click',false,false);<br />obj.dispatchEvent(e);<br />}<br />}</p><p></script><br /><input type="button" value="btn1" id="btn1" onclick=" alert('按鈕btn1的click事件') " /><br /><input type="button" value="觸發ID為btn1的onclick事件" onclick=" handerToClick() " /></p><p>9.IE下event對象有srcElement屬性,w3c下,event對象有target屬性<br />e = e||window.event;<br />if(e==null)//當事件在iframe中時為空白<br /> e=window.top.document.parentWindow.event;<br />var obj=e.srcElement || e.target;</p><p>IE中onmouseover和onmouseout分別有屬性e.fromElement和e.toElement<br />而w3c只用一個屬性relatedTarget代替</p><p>10.在w3c中自己定義的屬性必須getAttribute()取得</p><p>11.在FF3.0+，Ajax非同步問題<br />var isFirefox=navigator.userAgent.indexOf("Firefox")>-1<br />xhr.onreadystatechange=handler;<br /> xhr.open('GET',encodeURI(sUrl),bAsync);<br /> xhr.send(null);<br /> if(isFirefox) {<br /> /*xhr.onreadystatechange=*/handler();<br /> }</p><p>12.FF下沒有insertAdjacentHTML問題(除ff中都有)<br />兩種解決辦法，在如果在iframe中只能使用後一種：<br />①<br /> insertable:function(){//insertAdjacentHTML<br />if(document.body.insertAdjacentHTML){return;}<br />HTMLElement.prototype.insertAdjacentHTML = function(sWhere, sHTML){<br />var df = null,r = this.ownerDocument.createRange();<br />switch (String(sWhere).toLowerCase()) {<br />case "beforebegin":<br />r.setStartBefore(this);<br />df = r.createContextualFragment(sHTML);<br />this.parentNode.insertBefore(df, this);<br />break;<br />case "afterbegin":<br />r.selectNodeContents(this);<br />r.collapse(true);<br />df = r.createContextualFragment(sHTML);<br />this.insertBefore(df, this.firstChild);<br />break;<br />case "beforeend":<br />r.selectNodeContents(this);<br />r.collapse(false);<br />df = r.createContextualFragment(sHTML);<br />this.appendChild(df);<br />break;<br />case "afterend":<br />r.setStartAfter(this);<br />df = r.createContextualFragment(sHTML);<br />this.parentNode.insertBefore(df, this.nextSibling);<br />break;<br />}<br />};<br />}(),<br />②<br /> insertHtml:function(where, el, html){<br /> where = where.toLowerCase();<br /> if(el.insertAdjacentHTML){<br /> switch(where){<br /> case "beforebegin":<br /> el.insertAdjacentHTML('BeforeBegin', html);<br /> return el.previousSibling;<br /> case "afterbegin":<br /> el.insertAdjacentHTML('AfterBegin', html);<br /> return el.firstChild;<br /> case "beforeend":<br /> el.insertAdjacentHTML('BeforeEnd', html);<br /> return el.lastChild;<br /> case "afterend":<br /> el.insertAdjacentHTML('AfterEnd', html);<br /> return el.nextSibling;<br /> }<br /> throw 'Illegal insertion point -> "' + where + '"';<br /> }<br /> var range = el.ownerDocument.createRange();<br /> var frag;<br /> switch(where){<br /> case "beforebegin":<br /> range.setStartBefore(el);<br /> frag = range.createContextualFragment(html);<br /> el.parentNode.insertBefore(frag, el);<br /> return el.previousSibling;<br /> case "afterbegin":<br /> if(el.firstChild){<br /> range.setStartBefore(el.firstChild);<br /> frag = range.createContextualFragment(html);<br /> el.insertBefore(frag, el.firstChild);<br /> return el.firstChild;<br /> }else{<br /> el.innerHTML = html;<br /> return el.firstChild;<br /> }<br /> case "beforeend":<br /> if(el.lastChild){<br /> range.setStartAfter(el.lastChild);<br /> frag = range.createContextualFragment(html);<br /> el.appendChild(frag);<br /> return el.lastChild;<br /> }else{<br /> el.innerHTML = html;<br /> return el.lastChild;<br /> }<br /> case "afterend":<br /> range.setStartAfter(el);<br /> frag = range.createContextualFragment(html);<br /> el.parentNode.insertBefore(frag, el.nextSibling);<br /> return el.nextSibling;<br /> }<br /> throw 'Illegal insertion point -> "' + where + '"';<br /> }</p><p>13.FF下沒有outerHTML問題（除ff都支援）：<br />if(!document.body.outerHTML && typeof(HTMLElement)!="undefined")<br />{<br /> HTMLElement.prototype.__defineGetter__("outerHTML",function()<br /> {<br /> var a=this.attributes, str="<"+this.tagName, i=0;for(;i<a.length;i++)<br /> if(a[i].specified)<br /> str+=" "+a[i].name+'="'+a[i].value+'"';<br /> if(!this.canHaveChildren)<br /> return str+" />";<br /> return str+">"+this.innerHTML+"</"+this.tagName+">";<br /> });<br /> HTMLElement.prototype.__defineSetter__("outerHTML",function(s)<br /> {<br /> var r = this.ownerDocument.createRange();<br /> r.setStartBefore(this);<br /> var df = r.createContextualFragment(s);<br /> this.parentNode.replaceChild(df, this);<br /> return s;<br /> });<br /> HTMLElement.prototype.__defineGetter__("canHaveChildren",function()<br /> {<br /> return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());<br /> });<br />}<br />或者如果只需要取值也可以：<br /> function outerHTML(obj) {<br />if(obj.outerHTML)<br />return obj.outerHTML;<br />else {<br />var el=document.createElement("div");<br />el.appendChild(this.cloneNode(true));<br />return el.innerHTML;<br />}<br />}<br />14.訪問css的float和class：<br />由於float在JavaScript中是保留字，<br />IE：obj.style.styleFloat="left";<br />w3c: obj.style.cssFloat="left";<br />同理擷取對象的class時(IE&FF:obj.className;)：<br />IE: obj.getAttribute("className");<br />w3c: obj.getAttribute("class");</p><p>15.訪問<label>的for屬性<br />同樣，for在JavaScript中是保留字：<br />IE：obj.getAttribute("htmlFor");<br />w3c: obj.getAttribute("for");</p><p>16.訪問元素繼承的樣式：<br />IE：obj.currentStyle.width;<br />w3c: document.defaultView.getComputedStyle(obj,null).width;</p><p>17.擷取網頁可見地區大小：<br />FF:<br />window.innerWidth;<br />window.innerHeight;<br />IE&FF：<br />var getClientRect=function() {<br />var de;<br />if(document.compatMode=="CSS1Compat")de=document.documentElement;<br />else de=document.body;<br />return {width:de.clientWidth,height:de.clientHeight};<br />}<br />alert(getClientRect().width +"|"+getClientRect().height);</p><p>18.節點問題<br />IE中使用parentEl.chilren()方法擷取所有子 元素節點，而w3c不支援,<br />IE可以用childEl.parentElement擷取父元素，w3c不支援，統一使用parentNode;</p><p>IE和w3c中:parentEl.childNodes屬性，返回所有子節點集合，包含文本節點</p><p>IE&w3c:parentEl.children，屬性，返回所有子 元素（不包含文本）節點集合</p><p>w3c中節點沒有removeNode方法，必須使用如下方法 node.parentNode.removeChild(node)</p><p>12.<br />