1.eval(idName)
【問(wèn)題描述】:IE、safari、Chrome瀏覽器下都可以使用eval(idName)或getElementById(idName)來(lái)取得id為idName的HTML對(duì)象;firefox下只能使用getElementById(idName)來(lái)取得id為idName的HTML對(duì)象.
【兼容辦法】:統(tǒng)一用getElementById("idName")來(lái)取得id為idName的HTML對(duì)象。
2.ActiveXObject
【問(wèn)題描述】:IE下支持用var obj = new ActiveXObject()的方式創(chuàng)建對(duì)象,但其它瀏覽器都會(huì)提示ActiveXObject對(duì)象未定義。
【兼容辦法】:
(1)在使用new ActiveXObject()之前先判斷瀏覽器是否支持ActiveXObject對(duì)象,以創(chuàng)建AJAX對(duì)象為例:
1 if(window.ActiveXObject)2 {3 this.req=new ActiveXObject("Microsoft.XMLHTTP");4 }5 else if(window.XMLHttpRequest)6 {7 this.req=new XMLHttpRequest();8 }
(2)使用jQuery封裝的ajax方法來(lái)創(chuàng)建對(duì)象,以創(chuàng)建AJAX對(duì)象為例(推薦):
1 var strResponse = ""; 2 jQuery.ajax({ url: sAspFile, data: "<root>" + sSend + "</root>", processData: false, async: false, type: "POST", 3 error: function(XMLHttpRequest, textStatus, errorThrown) 4 { 5 strResponse = textStatus; 6 }, 7 success: function(data, textStatus) 8 { 9 strResponse = data;10 } 11 });
3.XML操作
【問(wèn)題描述】:通常裝載xml文檔使用ActiveXObject對(duì)象,但除非IE外,其它瀏覽器都不支持此方法。XML文檔操作,IE和其它瀏覽器也存在不同,通常取XML對(duì)象的XML文本的方法是xml.documentElement.xml,但xml屬性只有IE支持,其它瀏覽器均不支持。查找節(jié)點(diǎn)是常用的方法有selectNodes和selectSingleNode,這兩個(gè)方法也只有IE支持,其它瀏覽器需要自己擴(kuò)展。
【兼容辦法】
(1)裝載XML文檔:用$.ajax(),參考jquery幫助文檔
(2)xml對(duì)象轉(zhuǎn)字符串,如:
1 var stringtoxml = function(str) { //字符串轉(zhuǎn)xml對(duì)象 2 var s = "<?xml version='1.0' encoding='utf-8' ?>" + str; 3 var objxml = null; 4 if (window.ActiveXObject) { 5 objxml = new ActiveXObject("Microsoft.XMLDOM"); 6 objxml.async = false; 7 objxml.loadXML(s); 8 } 9 else {10 objxml = (new DOMParser()).parseFromString(s, "text/xml");11 }12 return objxml;13 }14 15 var xmltostring = function(dom) { //xml對(duì)象轉(zhuǎn)字符串16 if (dom instanceof jQuery) {17 dom = dom[0];18 }19 var str = null;20 if (window.ActiveXObject) {21 str = dom.xml;22 }23 else {24 str = (new XMLSerializer()).serializeToString(dom);25 }26 return str;27 }28 29 var oXMLO = stringtoxml("<root>"+ xml +"</root>");30 var root = oXMLO.documentElement;31 var strXml = xmltostring(root).replace("<root>","");
(3)字符串轉(zhuǎn)xml對(duì)象,如:
1 var oXML = stringtoxml("<root>" + document.getElementById("hidTaskXml").value + "</root>");
(4)查找結(jié)點(diǎn):可以用JQUERY同的find方法來(lái)查找結(jié)點(diǎn),如:
1 var item = $(oXML).find("record");
或者用原型擴(kuò)展方法為XML對(duì)象添加selectNodes和selectSingleNode方法,擴(kuò)展方法如下:
if( document.implementation.hasFeature("XPath", "3.0") ) { XMLDocument.prototype.selectNodes =function(cXPathString, xNode) { if( !xNode ) { xNode = this; } var oNSResolver = this.createNSResolver(this.documentElement); var aItems = this.evaluate(cXPathString, xNode, oNSResolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null) ; var aResult = []; for( var i = 0; i < aItems.snapshotLength; i++) { aResult[i] = aItems.snapshotItem(i); } return aResult; } Element.prototype.selectNodes = function(cXPathString) { if(this.ownerDocument.selectNodes) { return this.ownerDocument.selectNodes(cXPathString, this); } else { throw "For XML Elements Only"; } } XMLDocument.prototype.selectSingleNode = function(cXPathString, xNode) { if( !xNode ) { xNode = this; } var xItems = this.selectNodes(cXPathString, xNode); if( xItems.length > 0 ) { return xItems[0]; } else { return null; } } Element.prototype.selectSingleNode = function(cXPathString) { if(this.ownerDocument.selectSingleNode) { return this.ownerDocument.selectSingleNode(cXPathString, this); } else { throw "For XML Elements Only"; } } }
4.window.execScript()
【問(wèn)題描述】:只有IE瀏覽器支持execScript方法,其它的都不支持。但所有瀏覽器都支持window.eval()方法。
【兼容辦法】:用window.eval()方法代替window.execScript()。如
1 //window.execScript(“alert(123)”);2 3 window.eval(“alert(123)”);
5.window.createPopup()
【問(wèn)題描述】:創(chuàng)建一個(gè)彈出窗口的方法,IE支持此方法,Safari、FireFox、Chrome都不支持,使用時(shí)會(huì)提示createPopup方法未定義。
【兼容辦法】:可用如下方法為window對(duì)象添加createPopup方法。
if (!window.createPopup) { var __createPopup = function() { var SetElementStyles = function( element, styleDict ) { var style = element.style ; for ( var styleName in styleDict )style[ styleName ] = styleDict[ styleName ] ; } var eDiv = document.createElement( 'div' ); SetElementStyles( eDiv, { 'position': 'absolute', 'top': 0 + 'px', 'left': 0 + 'px', 'width': 0 + 'px', 'height': 0 + 'px', 'zIndex': 1000, 'display' : 'none', 'overflow' : 'hidden' } ) ; eDiv.body = eDiv ; var opened = false ; var setOpened = function( b ) { opened = b; } var getOpened = function() { return opened ; } var getCoordinates = function( oElement ) { var coordinates = {x:0,y:0} ; while( oElement ) { coordinates.x += oElement.offsetLeft ; coordinates.y += oElement.offsetTop ; oElement = oElement.offsetParent ; } return coordinates ; } return { htmlTxt : '', document : eDiv, isOpen : getOpened(), isShow : false, hide : function() { SetElementStyles( eDiv, { 'top': 0 + 'px', 'left': 0 + 'px', 'width': 0 + 'px', 'height': 0 + 'px', 'display' : 'none' } ) ; eDiv.innerHTML = '' ; this.isShow = false ; }, show : function( iX, iY, iWidth, iHeight, oElement ) { if (!getOpened()) { document.body.appendChild( eDiv ) ; setOpened( true ) ; } ; this.htmlTxt = eDiv.innerHTML ; if (this.isShow) { this.hide() ; } ; eDiv.innerHTML = this.htmlTxt ; var coordinates = getCoordinates ( oElement ) ; eDiv.style.top = ( iX + coordinates.x ) + 'px' ; eDiv.style.left = ( iY + coordinates.y ) + 'px' ; eDiv.style.width = iWidth + 'px' ; eDiv.style.height = iHeight + 'px' ; eDiv.style.display = 'block' ; this.isShow = true ; } } } window.createPopup = function() { return __createPopup(); } }
6.getYear()方法
【問(wèn)題描述】:如下代碼:
1 var year= new Date().getYear();2 3 document.write(year);
在IE中得到的日期是"2011",在Firefox中看到的日期是"111",主要是因?yàn)樵?Firefox 里面getYear返回的是 "當(dāng)前年份-1900"的值。
【兼容辦法】:解決辦法是加上對(duì)年份的判斷,如:
1 var year= new Date().getYear();2 year = (year<1900?(1900+year):year);3 document.write(year);
也可以通過(guò) getFullYear getUTCFullYear去調(diào)用:
1 var year = new Date().getFullYear();2 3 document.write(year);
7.document.all
【問(wèn)題描述】:document.all在IE、Safari下都可以使用,firefox、Chrome下不能使用
【兼容辦法】:所有以document.all.*方法獲取對(duì)象的地方都改為document.getElementById或document.getElementsByName或document.getElementsByTagName。
8.變量名與對(duì)象ID相同的問(wèn)題
【問(wèn)題描述】:IE下,HTML對(duì)象的ID可以作為document的下屬對(duì)象變量名直接使用,如下面的寫(xiě)法:
objid.value = “123”;//objid為控件ID
其它瀏覽器下則不能這樣寫(xiě)。原因是其它瀏覽器下,可以使用與HTML對(duì)象ID相同的變量名,IE下則不能。
【兼容辦法】:使用document.getElementById(idName)等通用方法先獲取對(duì)象,再操行其它操作。如:
document.getElementById(objid).value = “123”; //objid為控件ID
注:最好不要取HTML對(duì)象ID相同的變量名,以減少錯(cuò)誤;在聲明變量時(shí),一律加上var,以避免歧義。
9.select元素的add方法
【問(wèn)題描述】:在IE,Safari,Chrome下,select控件添加項(xiàng)時(shí)使用如下的方法:
document.getElementById(“select1”).add(new Options(“aa”,”aa”));
但在FireFox下這樣操作會(huì)報(bào)錯(cuò)。
【兼容辦法】:統(tǒng)一使用兼容方法,加options屬性,如下:
document.getElementById(“select1”).options.add(new Options(“aa”,”aa”));
10.html元素的自定義屬性
【問(wèn)題描述】:IE下元素屬性訪(fǎng)問(wèn)方法如document.getElementById(id).屬性名,而且對(duì)于自定義屬性和非自定義屬性均有效。但在其它瀏覽器下該方法只適應(yīng)于元素的公共屬性,自定義屬性則取不到。
【兼容辦法】:用jQuery的方法來(lái)取,如$(“#id”).attr(“屬性”)或用document.getElementById(id).getAttribute(“屬性”),兩種方法都可以適用所有瀏覽器。
11.html元素innerText屬性
【問(wèn)題描述】:取元素文本的屬性innerText在IE中能正常工作,但此屬性不是DHTML標(biāo)準(zhǔn),其它瀏覽器不支持,其它瀏覽器中使用textContent屬性獲取。
【兼容辦法】:
(1)通用方法是用jQuery方法$(“#id”).text(),如:
//document.getElementById(id).innerText;$(“#id”).text();
(2)取值前判斷瀏覽器,根據(jù)具體情況取值,如:
var obj = document.getElementById(id);var str = (obj.innerText)?obj.innerText:obj.textContent;
(3)也可以通過(guò)原型擴(kuò)展方法來(lái)為元素添加innerText,擴(kuò)展方法如下:
if(typeof(HTMLElement)!="undefined" && !window.opera) { var pro = window.HTMLElement.prototype; pro.__defineGetter__("innerText",function (){ var anyString = ""; var childS = this.childNodes; for(var i=0; i<childS.length; i++) { if(childS[i].nodeType==1) { anyString += childS[i].tagName=="BR" ? '\n' : childS[i].innerText; } else if(childS[i].nodeType==3) { anyString += childS[i].nodeValue; } } return anyString; }); pro.__defineSetter__("innerText",function(sText){ this.textContent=sText; }); }
12.html元素innerHTML、outerHTML屬性
【問(wèn)題描述】:innerHTML是所有瀏覽器都支持的屬性。outerHTML屬性不是DHTML標(biāo)準(zhǔn),IE外的其它瀏覽器不支持。
【兼容辦法】:在非IE瀏覽器下必須使用擴(kuò)展方法才能獲取,擴(kuò)展方法如下:
if(typeof(HTMLElement)!="undefined" && !window.opera) { var pro = window.HTMLElement.prototype; pro.__defineGetter__("outerHTML", function(){ var str = "<" + this.tagName; var a = this.attributes; for(var i = 0, len = a.length; i < len; i++) { if(a[i].specified) { str += " " + a[i].name + '="' + a[i].value + '"'; } } if(!this.canHaveChildren) { return str + " />"; } return str + ">" + this.innerHTML + "</" + this.tagName + ">"; }); pro.__defineSetter__("outerHTML", function(s){ var r = this.ownerDocument.createRange(); r.setStartBefore(this); var df = r.createContextualFragment(s); this.parentNode.replaceChild(df, this); return s; }); }
13.html元素parentElement屬性
【問(wèn)題描述】:parentElement是取元素父結(jié)點(diǎn)的屬性,此屬性只有IE支持,其它瀏覽器均不支持。
【兼容辦法】:用parentNode屬性來(lái)獲取父結(jié)點(diǎn),如:
//document.getElementById(id).parentElement;document.getElementById(id).parentNode;
14.集合類(lèi)對(duì)象問(wèn)題
【問(wèn)題描述】:IE下對(duì)于集合類(lèi)對(duì)象,如forms,frames等,可以使用()或[]獲取集合類(lèi)對(duì)象,Safari,Chrome也都支持,如
document.forms(“formid”) 或 document.forms[“formid”]。但Firefox下,只能使用[]獲取集合類(lèi)對(duì)象。
【兼容辦法】:統(tǒng)一使用[]獲取集合類(lèi)對(duì)象,如:
document.forms[0];document.forms[“formid”];
【注】:所有以數(shù)組方式存儲(chǔ)的對(duì)象都在訪(fǎng)問(wèn)子成員時(shí),都必須以[]方式索引得到,如常見(jiàn)的XML文檔遍歷,也需要改,如下:
// xmldoc.documentElement.childNodes(1) xmldoc.documentElement.childNodes[1]
15.frame操作
【問(wèn)題描述】:在IE、Safari、Chrome下,用window對(duì)象訪(fǎng)問(wèn)frame對(duì)象時(shí),可以用id和name屬性來(lái)獲取,如
window.frameId;window.frameName;
但在firefox下,必須使用frame對(duì)象的name屬性才能獲取到。
【兼容辦法】:
(1)訪(fǎng)問(wèn)frame對(duì)象:統(tǒng)一使用window.document.getElementById(frameId)來(lái)訪(fǎng)問(wèn)這個(gè)frame對(duì)象。
(2)切換frame內(nèi)容:統(tǒng)一使用window.document.getElementById(testFrame).src=xxx.htm切換。
如果需要將frame中的參數(shù)傳回父窗口,可以在frame中使用parent來(lái)訪(fǎng)問(wèn)父窗口。例如:parent.document.form1.filename.value=Aqing;
(3)iframe頁(yè)中的對(duì)象: $("#frameid").contents().find("#html控件id")
(4)iframe頁(yè)中的iframe: $("#frameid").contents().find("#frameid1").contents();
(5)iframe中的方法或變量:$("#frameid")[0] .contentWindow.SaveFile("false", strRet, a);
16.insertAdjacentHTML和insertAdjacentText
【問(wèn)題描述】:insertAdjacentHTML方法是比 innerHTML、outerHTML屬性更靈活的插入 HTML 代碼的方法。它可以實(shí)現(xiàn)在一個(gè) DOM元素的前面、后面、第一個(gè)子元素前面、最后一個(gè)子元素后面四個(gè)位置,插入指定的 HTML代碼。不是 W3C 標(biāo)準(zhǔn)的 DOM方法,W3C 近期在 HTML5草案中擴(kuò)展了這個(gè)方法。
insertAdjacentText 是比 innerText、outerText屬性更靈活的插入文本的方法。它可以實(shí)現(xiàn)在一個(gè) DOM 元素的前面、后面、第一個(gè)子元素前面、最后一個(gè)子元素后面四個(gè)位置,插入指定的文本。不是 W3C標(biāo)準(zhǔn)的 DOM 方法,至今為止 W3C的 HTML5還未涉及此方法。
insertAdjacentHTML和insertAdjacentText可以IE、Safari、Chrome上執(zhí)行,只有FireFox不支持,
【兼容辦法】:可用以下方法進(jìn)行擴(kuò)展:
if (typeof(HTMLElement) != "undefined") { HTMLElement.prototype.insertAdjacentElement = function(where, parsedNode) { switch (where) { case "beforeBegin": this.parentNode.insertBefore(parsedNode, this); break; case "afterBegin": this.insertBefore(parsedNode, this.firstChild); break; case "beforeEnd": this.appendChild(parsedNode); break; case "afterEnd": if (this.nextSibling) this.parentNode.insertBefore(parsedNode, this.nextSibling); else this.parentNode.appendChild(parsedNode); break; } } HTMLElement.prototype.insertAdjacentHTML = function(where, htmlStr) { var r = this.ownerDocument.createRange(); r.setStartBefore(this); var parsedHTML = r.createContextualFragment(htmlStr); this.insertAdjacentElement(where, parsedHTML); } HTMLElement.prototype.insertAdjacentText = function(where, txtStr) { var parsedText = document.createTextNode(txtStr); this.insertAdjacentElement(where, parsedText); }}
17.Html元素的children屬性
【問(wèn)題描述】:children是取HTML元素子結(jié)點(diǎn)的屬性,只有IE下支持,其它瀏覽器下用childNodes。
【兼容辦法】:統(tǒng)一改為用childNodes屬性取子結(jié)點(diǎn)?;蛴靡韵路椒〝U(kuò)展HTML元素的屬性:
if (typeof(HTMLElement) != "undefined") { HTMLElement.prototype.__defineGetter__("children",function(){ var returnValue = new Object(); var number = 0; for(var i=0; i<this.childNodes.length; i++) { if(this.childNodes[i].nodeType == 1) { returnValue[number] = this.childNodes[i]; number++; } } returnValue.length = number; return returnValue; })}
18.insertRow\inserCell
【問(wèn)題描述】:insertRow和insertCell是在表格中插入行或插入列的方法,在IE中使用方法如下
var nowTB = document.getElementById("tb1");nowTR = nowTB.insertRow();nowTD = nowTR.insertCell();
Safari、Chrome下也可以正常執(zhí)行,但插入行的位置不一樣IE下默認(rèn)在表尾插入行,Safari、Chrome默認(rèn)在表頭插入行;但在FireFox下調(diào)用會(huì)報(bào)錯(cuò)。
【兼容辦法】:下面的方法可以在所有瀏覽器上調(diào)用,而且插入行的位置都是表尾,不同之處就是執(zhí)行前傳遞一個(gè)默認(rèn)值。推薦使用。
var nowTB = document.getElementById("tb1");nowTR = nowTB.insertRow(-1);nowTD = nowTR.insertCell(-1);
19.document.createElement
【問(wèn)題描述】:IE有3種方式都可以創(chuàng)建一個(gè)元素:
1 document.createElement("<input type=text>")2 document.createElement("<input>")3 document.createElement("input")
Safari、FireFox、Chrome只支持一種方式:
document.createElement("input");document.setAttribute(name,value);
【兼容辦法】:統(tǒng)一使用所有瀏覽器都支持的方法,如下:
document.createElement("input");document.setAttribute(name,value);
20.瀏覽器處理childNodes的異同
【問(wèn)題描述】:如下HTML代碼:
<ul id="main"><li>1</li><li>2</li><li>3</li></ul><input type=button value="click me!" onclick="alert(document.getElementById('main').childNodes.length)">
分別用IE和其它瀏覽器運(yùn)行,IE的結(jié)果是3,而其它則是7。
IE是將一個(gè)完整標(biāo)簽作為一個(gè)節(jié)點(diǎn),而Safari、FireFox、Chrome除了上述的的情況外,也把一個(gè)標(biāo)簽的結(jié)束符“>”到下一個(gè)標(biāo)簽的起始符“<”之間的內(nèi)容(除注釋外,包括任何的文字、空格、回車(chē)、制表符)也算是一個(gè)節(jié)點(diǎn)了,而且這種節(jié)點(diǎn)也有它們自己獨(dú)特的屬性和值nodeName="#text"。
【兼容辦法】:在實(shí)際運(yùn)用中,Safari、FireFox、Chrome在遍歷子節(jié)點(diǎn)時(shí),在for循環(huán)里加上
if(childNode.nodeName=="#text") continue;或者nodeType == 1這樣,便跳過(guò)不需要的操作,使程序運(yùn)行的更有效率。也可以用node.getElementsByTagName()回避。
21.document.getElementsByName
【問(wèn)題描述】:在元素只有name屬性,沒(méi)有id屬性的情況下,在IE中獲取不到DIV元素,其它瀏覽器可以獲取。當(dāng)前name和id屬性都存在時(shí),所有瀏覽器都可以獲取到DIV元素。
【兼容辦法】:盡量用ID來(lái)獲取。
22.tr操作
【問(wèn)題描述】:IE下table中無(wú)論是用innerHTML還是appendChild插入<tr>都沒(méi)有效果,因?yàn)樵贗E瀏覽器下tr是只讀的。而其他瀏覽器下可以這樣操作。
【兼容辦法】:將<tr>加到table的<tbody>元素中,如下面所示:
var row = document.createElement("tr");var cell = document.createElement("td");var cell_text = document.createTextNode("插入的內(nèi)容");cell.appendChild(cell_text);row.appendChild(cell);document.getElementsByTagName("tbody")[0].appendChild(row);
23.移除節(jié)點(diǎn)removeNode()
【問(wèn)題描述】:appendNode在IE和其它瀏覽器下都能正常使用,但是removeNode只能在IE下用。removeNode方法的功能是刪除一個(gè)節(jié)點(diǎn),語(yǔ)法為node.removeNode(false)或者node.removeNode(true),返回值是被刪除的節(jié)點(diǎn)。
removeNode(false)表示僅僅刪除指定節(jié)點(diǎn),然后這個(gè)節(jié)點(diǎn)的原孩子節(jié)點(diǎn)提升為原雙親節(jié)點(diǎn)的孩子節(jié)點(diǎn)。
removeNode(true)表示刪除指定節(jié)點(diǎn)及其所有下屬節(jié)點(diǎn)。被刪除的節(jié)點(diǎn)成為了孤立節(jié)點(diǎn),不再具有有孩子節(jié)點(diǎn)和雙親節(jié)點(diǎn)。
【兼容辦法】:兼容IE和其它瀏覽器的方法是removeChild,先回到父節(jié)點(diǎn),在從父節(jié)點(diǎn)上移除要移除的節(jié)點(diǎn)。
// 為了在IE和其它瀏覽器下都能正常使用,取上一層的父結(jié)點(diǎn),然后remove。node.parentNode.removeChild(node);
24.expression
【問(wèn)題描述】:IE下樣式支持計(jì)算表達(dá)式expression,但其它瀏覽器不支持,而且IE以后高版本也可能不再支持這種樣式,所以不允許使用。下面是通常使用的情況:
<div id=”content” style=’height:(document.body.offsetHeight-80)”></div>
【兼容辦法】:去掉樣式設(shè)置,將其寫(xiě)到函數(shù)中,分別在頁(yè)面加載完畢和頁(yè)面尺寸發(fā)生變化時(shí)執(zhí)行。如下:
$(function(){ $(“#content”).height($(document.body).height()-80);})$(window).resize(function(){ $(“#content”).height($(document.body).height()-80);});
25.Cursor
【問(wèn)題描述】:Cursor的hand屬性只有IE支持,其它瀏覽器沒(méi)有效果,如:
<div style=”cursor:hand”></div>
【兼容辦法】:統(tǒng)一用pointer值,如:
<div style=”cursor: pointer”></div>
26.CSS透明問(wèn)題
【問(wèn)題描述】:IE支持但其它瀏覽器不支持的透明樣式如下:
<div style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=20);width:200px;height:200px;background-color:Blue">ddddd</div>
其它瀏覽器支持但I(xiàn)E不支持的透明樣式如下:
<div style="opacity:0.2;width:200px;height:200px;background-color:Blue">ddddd</div>
【兼容辦法】:利用”!important”來(lái)設(shè)置元素的樣式。Safari,F(xiàn)ireFox,Chrome對(duì)于”!important”會(huì)自動(dòng)優(yōu)先解析,然而IE則會(huì)忽略。如下
<div style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=20);width:200px;height:200px;background-color:Blue;!important; opacity:0.2">ddddd</div>
27.pixelHeight\pixelWidth
【問(wèn)題描述】:pixelHeight\pixelWidth是元素的高度和寬度樣式,通常獲取方法是:
obj.style.pixelWidth;obj.style.pixelHeight;
IE,Safari,Chrome都支持此樣式,返回的值是整數(shù),F(xiàn)ireFox不支持
【兼容辦法】:所有瀏覽器都支持obj.style.height,但返回的值是帶單位的,如“100px”??梢杂萌缦路椒▉?lái)獲取:
parseInt(obj.style.height)
28.noWrap
【問(wèn)題描述】:nowrap屬性是被廢棄的屬性。
【兼容辦法】:使用 CSS規(guī)則 white-space:nowrap 代替這個(gè)屬性。
29.CSS的float屬性
【問(wèn)題描述】:Javascript訪(fǎng)問(wèn)一個(gè)給定CSS值的最基本句法是:object.style.property,但部分CSS屬性跟Javascript中的保留字命名相同,如"float","for","class"等,不同瀏覽器寫(xiě)法不同。
在IE中這樣寫(xiě):
document.getElementById("header").style.styleFloat = "left";
在其它瀏覽器中這樣寫(xiě):
document.getElementById("header").style.cssFloat = "left";
【兼容辦法】:兼容方法是在寫(xiě)之前加一個(gè)判斷,判斷瀏覽器是否是IE:
if(jQuery.browser.msie){ document.getElementById("header").style.styleFloat = "left";}else{ document.getElementById("header").style.cssFloat = "left";}
30.訪(fǎng)問(wèn)label標(biāo)簽中的for
【問(wèn)題描述】:for屬性規(guī)定 label 與哪個(gè)表單元素綁定。在IE中這樣寫(xiě):
var myObject = document.getElementById("myLabel");var myAttribute = myObject.getAttribute("htmlFor");
在Firefox中這樣寫(xiě):
var myObject = document.getElementById("myLabel");var myAttribute = myObject.getAttribute("for");
【兼容辦法】:判斷瀏覽器是否是IE:
var myObject = document.getElementById("myLabel");if(jQuery.browser.msie){ var myAttribute = myObject.getAttribute("htmlFor");}else{ var myAttribute = myObject.getAttribute("for");}
31.訪(fǎng)問(wèn)和設(shè)置class屬性
【問(wèn)題描述】:同樣由于class是Javascript保留字的原因,這兩種瀏覽器使用不同的 JavaScript 方法來(lái)獲取這個(gè)屬性。
IE8.0之前的所有IE版本的寫(xiě)法:
var myObject = document.getElementById("header");var myAttribute = myObject.getAttribute("className");
適用于IE8.0以及 firefox的寫(xiě)法:
var myObject = document.getElementById("header");var myAttribute = myObject.getAttribute("class");
另外,在使用setAttribute()設(shè)置Class屬性的時(shí)候,兩種瀏覽器也存在同樣的差異。
setAttribute("className",value);這種寫(xiě)法適用于IE8.0之前的所有IE版本,注意:IE8.0也不支持"className"屬性了。setAttribute("class",value);適用于IE8.0以及 firefox。
【兼容辦法】:
1.兩種都寫(xiě)上:
1 //設(shè)置header的class為classValue2 var myObject = document.getElementById("header");3 4 myObject.setAttribute("class","classValue");5 6 myObject.setAttribute("className","classValue");
2.IE和FF都支持object.className,所以可以這樣寫(xiě):
var myObject = document.getElementById("header");myObject.className="classValue";//設(shè)置header的class為classValue
3.先判斷瀏覽器類(lèi)型,再根據(jù)瀏覽器類(lèi)型采用對(duì)應(yīng)的寫(xiě)法。
32.對(duì)象寬高賦值問(wèn)題
【問(wèn)題描述】:非IE瀏覽器中中類(lèi)似 obj.style.height = imgObj.height的語(yǔ)句無(wú)效,必須加上’px’。
【兼容辦法】:給元素高度寬度附值是,統(tǒng)一都加上’px’,如:
obj.style.height = imgObj.height + ‘px’;
33.鼠標(biāo)位置
【問(wèn)題描述】:IE下,even對(duì)象有x、y屬性,但是沒(méi)有pageX、pageY屬性;Firefox下,even對(duì)象有pageX、pageY屬性,但是沒(méi)有x、y屬性;Safari、Chrome中x、y屬性和pageX、pageY都有。
【兼容辦法】:使用mX = event.x ? event.x : event.pageX;來(lái)代替。復(fù)雜點(diǎn)還要考慮絕對(duì)位置。
function getAbsPoint(e){ var x = e.offsetLeft, y = e.offsetTop; while (e = e.offsetParent) { x += e.offsetLeft; y += e.offsetTop; } alert("x:" + x + "," + "y:" + y);}
34.event.srcElement
【問(wèn)題描述】:IE下,event對(duì)象有srcElement屬性,但是沒(méi)有target屬性;其它瀏覽器下,even對(duì)象有target屬性,但是沒(méi)有srcElement屬性。
【兼容辦法】:
var obj = event.srcElement?event.srcElement:event.target;
35.關(guān)于<input type="file">
(1) 在safari瀏覽器下的此控件沒(méi)有文本框,只有一個(gè)“選取文件”的按鈕,所有也沒(méi)有onblur事件,如果在<input type="file" onblur="alert(0);">中用到了需要做特殊處理。
(2) 在FF瀏覽器下用<input type="file" name="file">上傳文件后取file.value時(shí)只能去掉文件名而沒(méi)有文件路徑,不能實(shí)現(xiàn)預(yù)覽的效果,可以用document.getElementById("pic").files[0].getAsDataURL();取到加密后的路徑,此路徑只有在FF下才可以解析。
(3) 在safari瀏覽器下用<input type="file" name="file">上傳文件后取file.value時(shí)只能去掉文件名而沒(méi)有文件路徑,不能實(shí)現(xiàn)預(yù)覽的效果。建議使用上傳后的路徑預(yù)覽。
36.jquery對(duì)象是否為空
jquery對(duì)象是否為空判斷,用length判斷一下
$("#hidTitle").length>0
聯(lián)系客服