瀏覽器兼容性問題知識整理更新

瀏覽器兼容性問題整理

李鍵敏7月12日

HTML,CSSJavascript1、IE中不合理的overflow-x和overflow-y組合overflow和overflow-x/overflow-y的簡介overflow是CSS2.1的特性，而overflow-x/overflow-y則是決定了對左、右上下的剪切.overflow-x/overflow-y默認(rèn)值：

visible

overflow-x/overflow-y的計算值對CSS3規(guī)定，'overflow-x'和'overflow-y'的計算值與所設(shè)置的值相等，除非這一對值不合理。所以，如果其中一個被設(shè)置成了'scroll'、'auto'、'hidden'之一，而另一個是'visible'，那么'visible'會被設(shè)置成'auto'。IE中不合理的overflow-x和overflow-y組合IE中，當(dāng)overflow-x/overflow-y其中之一被設(shè)置成'scroll'、'auto'、'hidden'時，另一個還是'visible'，不會被設(shè)置為'auto'。IE7(S)/IE8(S)其他瀏覽器IE6如何避免受此問題影響同時設(shè)置overflow-x和overflow-y的值，不要使它出現(xiàn)其中之一為'scroll'、'auto'、'hidden'時，而另一個是'visible'的情況。word-wrap在各瀏覽器中的差異word-wrap簡介當(dāng)前行超過指定容器的邊界時是否斷開轉(zhuǎn)行,該屬性取值可以為normal/break-wrap，默認(rèn)為normal一些Bug1，IE6/7andIE8(Q)中word-wrap:break-word作用于TD時，TD內(nèi)容是多個Img時，將不換行，撐寬了父容器2，IE6/7/8/Firefox中word-wrap:break-word作用于option(選項)的父元素/祖先元素上時將不換行隱藏部分顯示。option(選項)的父元素或祖先元素設(shè)置了word-wrap:break-word。（option自身設(shè)置該屬性不會觸發(fā)該現(xiàn)象）3，BODY元素設(shè)置了word-wrap:break-word樣式，其中有兩個左浮動div元素，第一個div內(nèi)有一個按鈕和若干input[type=hidden]的隱藏域，各input元素之間有空格。IE6(Q)

IE8(S)、Firefox(S)、Chrome(S)、Safari(S)容器內(nèi)部均為非浮動的行內(nèi)元素，其行內(nèi)元素與父元素的結(jié)束標(biāo)簽之間包含空白符，其內(nèi)部的非可視元素之間有空白符；

容器自身或者其祖先元素設(shè)置了word-wrap:break-word，并且從設(shè)置word-wrap:break-word的祖先元素到其自身中間沒有設(shè)置過word-wrap:normal。三、如何避免受此問題影響合理使用word-wrap屬性，對于select元素不使用word-wrap:break-word避免換行樣式變形。各瀏覽器對text-overflow特性的支持差異1、CSS3的text-overflow特性text-overflow可以作用于塊級元素、行內(nèi)元素和單元格，當(dāng)其值是ellipsis時是作用是將被剪除的文本用省略號表示。2、各瀏覽器對'text-overflow:ellipsis'的支持情況IE支持的最好，Webkit瀏覽器只支持不包含塊級元素的元素，F(xiàn)irefox舊版徹底不支持IE8(S)/Firefox12ChromeIE6(S)/IE7(S)Firefox(S)3.6在IE8(S),火狐中有個特殊情況，‘text-overflow:ellipsis’對其塊級子元素內(nèi)的文本沒有作用。3、Webkit瀏覽器中:after偽元素對'text-overflow:ellipsis'的影響在Webkit瀏覽器中:after如果被設(shè)置成一個塊級偽元素，'text-overflow:ellipsis'會失效。IE8(S)ChromeIE6(S)/IE7(S)/Firefox(S)如何避免受此問題影響

1.不要在包含塊級元素的元素上使用‘text-overflow:ellipsis’。 2.當(dāng)使用:after偽元素時，確保偽元素不是塊級元素。詳見/blog/2008/07/firefox-text-overflow-ellipsis/。JavascriptDOM獲取焦點1、關(guān)于focus網(wǎng)頁中進(jìn)行一系列操作，都需要使某個元素處于“激活”狀態(tài)，類似于錨點。通常，表單元素、錨點元素都支持focus。。遇到div,p怎么辦？2、focus與tabIndex（可設(shè)置或返回按鈕的tab鍵控制次序）目前，w3c規(guī)定，支持tabIndex的有：A,AREA,BUTTON,INPUT,OBJECT,SELECT,andTEXTAREA.。而實際，所有瀏覽器中，所有元素都支持tabIndex，并且設(shè)置過tabIndex的元素都支持focus。因此，我們想讓某一元素支持focus，為其設(shè)置tabIndex即可。。javascript中的setAttribute()定義和用法setAttribute()方法創(chuàng)建或改變某個新屬性。elementNode.setAttribute(name,value)1、樣式問題

關(guān)于class和classNameelement.setAttribute("class",vName);

element.setAttribute("className",vName);

//forIE6,7兼容：object.className="content“style和cssText兼容方法object.setAttribute(“style”,“position:absolute;left:10px;”)IE6，7不行object.setAttribute("cssText","position:absolute;left:10px;top:10px;")兼容：使用object.style.cssText="position:absolute;left:10px;top:10px;"2、setAttribute()的差異div.setAttribute(“onclick”,“javascript:alert(‘Thisisatest!’)”);//6,7div.onclick=function(){alert(‘sss’)}IE并不是不支持setAttribute這個函數(shù)，而是不支持用setAttribute設(shè)置某些屬性包括對象屬性、集合屬性、事件屬性;為達(dá)到兼容各種瀏覽器的效果，可以用點符號法來設(shè)置Element的對象屬性、集合屬性和事件屬性在IE瀏覽器與其他瀏覽器的命名區(qū)別列表

propFix={ 'for':'htmlFor', 'class':'className', 'html':'innerHTML', readonly:'readOnly', maxlength:'maxLength', cellspacing:'cellSpacing', rowspan:'rowSpan', colspan:'colSpan', tabindex:'tabIndex', usemap:'useMap', frameborder:'frameBorder' };各瀏覽器中獲取html元素屬性的差別1、設(shè)置HTML元素屬性的方式方式1，直接在html代碼中設(shè)置元素屬性，值只能是字符串。方式2，javascript代碼中通過點運算符設(shè)置元素屬性，值可以是JSON。方式3，javascript代碼中通過setAttribute方法設(shè)置元素屬性，值可以是JSON。2、獲取HTML元素屬性的方式方式1，javascript代碼中通過點運算符獲取元素屬性。方式2，javascript代碼中通過getAttribute方法獲取元素屬性代碼測試：getAttribute.html3、差別IE中無論元素自有屬性

，自定義屬性都能通過點運算符獲??；非IE瀏覽器只能通過getAttribute獲取自定義屬性。統(tǒng)一采用標(biāo)準(zhǔn)方法el.getAttribute(name)獲取,自帶的屬性盡量直接用.運算符去獲取。除了一些特別的，像hrefxx.getAttribute(“href”,2)//IE6,7自動補(bǔ)全如下：setAttribute.htmlid是div元素自有屬性，country是自定義屬性。各瀏覽器中各變量值匯總?cè)缦拢簄ewDate().getYear()標(biāo)準(zhǔn)參考根據(jù)ECMAScript規(guī)范附錄B.2.4Dtotype.getYear()

中的描述，‘getYear’返回的是當(dāng)前年份與-1900的差值，該方法已經(jīng)作廢，應(yīng)使用'getFullYear'來代替。alert(newDate(1979,11,11).getYear());alert(newDate(2012,5,20).getYear());IE79

2012FirefoxChromeSafariOpera79

112解決方案請不要使用Dtotype.getYear()方法，使用Dtotype.getFullYear()代替。另外，要給一個Date對象設(shè)置年份，也請不要使用Dtotype.setYear()方法，使用Dtotype.setFullYear()代替。Window.Event簡介：event代表事件的狀態(tài)，例如觸發(fā)event對象的元素、鼠標(biāo)的位置及狀態(tài)、按下的鍵等等。event對象只在事件發(fā)生的過程中才有效。問題說明：window.eventIE里的是全局變量，隨時可用，firefox里的要用參數(shù)引導(dǎo)才能用，是運行時的臨時變量。if(typeof(window.event)=='undefined'){alert('window.eventisundefined')//FF}else{alert('window.eventisdefined')//IE7/8/9}functiontest(event){ vare=(window.event?window.event:null)||event; console.log(e)}

<buttonid="btn3"onclick="test()">clicke!</button>標(biāo)準(zhǔn)方式下不能在事件處理方法中取得事件對象。onclick="test()"直接執(zhí)行了，沒任何參數(shù)傳遞給test函數(shù)第一：<buttonid=“btn3”onclick=“test(event)”>clicke!</button>這里的event不是形參，而是實參，必須名為event。//onclick="alert(arguments.callee)"第二：window.event||

arguments.callee.caller.arguments[0];onclick=‘test()’event.srcElement與event.target簡介：event.srcElement：

event.srcElement可以捕獲當(dāng)前事件作用的對象。target返回觸發(fā)此事件的元素（事件的目標(biāo)節(jié)點）。問題說明：IE下,event對象有srcElement屬性,但是沒有target屬性;Firefox下,event對象有target屬性,但是沒有srcElement屬性.functionmyFun(){console.log(arguments.callee.caller.toString())varets=window.event||arguments.callee.caller.arguments[0];varet=ets.srcElement||ets.target;}

event.x與event.y問題說明：IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;Firefox下,even對象有pageX,pageY屬性,但是沒有x,y屬性兼容：mXX=e.x?e.x:e.pageX;Event.Keycode,event.whichfunctionkeyUp(e){ varcurrKey=0,e=e||event; currKey=e.keyCode||e.which||e.charCode;

//這句是為了兼容瀏覽器按鍵事件對象的按鍵碼屬性如IE中，只有keyCode屬性，而FireFox中有which和charCode屬性，Opera中有keyCode和which屬性等 varkeyName=String.fromCharCode(currKey); alert("按鍵碼:"+currKey+"字符:"+keyName);}document.onkeyup=keyUp;‘hasOwnProperty’,

‘valueOf’,

‘isPrototypeOf’,‘toLocaleString’,

‘toString’,

‘constructor’for

...

In不出來問題說明：IE中存在一個bug,某個實例屬性與標(biāo)記為[[DontEnum]]的某個屬性同名，那么該實例屬性不會出現(xiàn)在forin。vararr={"first":1,"second":2,"third":3,toString:function(){},valueOf:function(){},constructor:11,hasOwnProperty:function(){},isPrototypeOf:function(){}/*propertyIsEnumerable:function(obj){}*/};vartxt=document.getElementById("txt");varstr="";for(varoinarr){str+=o+"'s[[DontEnum]]is"+pertyIsEnumerable(o)+"<br/>";}txt.innerHTML=str;結(jié)果如下，IE9，firefox,chrome,safari,opera都顯示如下：

而IE8,6,7顯示如下：

WhyisgetElementsByTagName()fasterthatquerySelectorAll()?/blog/2010/09/28/why-is-getelementsbytagname-faster-that-queryselectorall/簡單總結(jié)下：前者返回動態(tài)NodeList，后者返回靜態(tài)NodeList。動態(tài)NodeList是以注冊的方法返回的一個cache的引用（每次調(diào)用返回同一個cache），而靜態(tài)NodeList則需要重新獲得Node信息，相當(dāng)于一個創(chuàng)建一個實例（每次調(diào)用返回的結(jié)果不同），所以動態(tài)NodeList返回的快。querySelectorAll的用處在于兩點：提供CSS選擇器一樣的查詢DOM的功能、返回的是靜態(tài)NodeList故不隨DOM樹的變化而變化（不會陷入死循環(huán)）。NodeList是DOM操作（getElementsByTagName等）取出來的集合，是集合而不是普通的數(shù)組，但是他們有數(shù)組的一些屬性，例如length、下標(biāo)索引，但是他們也有自己的屬性。

NodeList最大的特點就是時效性NodeList轉(zhuǎn)化為數(shù)組functioncollectionToArray(collection){varary=[];for(vari=0,len=collection.length;i<len;i++){ ary.push(collection[i]);}returnary;}END謝謝【JS】JavaScript不支持重載，在JavaScript中，腳本在執(zhí)行時不會顧及函數(shù)定義時的參數(shù)，而是直接使用在作用域鏈中最后定義的那個函數(shù)。這意味著，相同名稱的函數(shù)永遠(yuǎn)