跨浏览器开发工作小结
本篇小結是在2011年時候總結的，當時做一個產品的跨瀏覽器兼容工作，由于產品開發的時間比較早，最開始只能在IE下面(IE 8、IE 9還有點點問題)使用，做跨瀏覽器兼容工作的時候，主要是適配IE 6--IE 9、Safari、FireFox、Chrome，引入了jQuery框架進行改造后，大部分功能可以正常使用，現將總結分享一下。
1.eval(idName)
【問題描述】：IE、safari、Chrome瀏覽器下都可以使用eval(idName)或getElementById(idName)來取得id為idName的HTML對象；firefox下只能使用getElementById(idName)來取得id為idName的HTML對象.
【兼容辦法】：統一用getElementById("idName")來取得id為idName的HTML對象。
2.ActiveXObject?
【問題描述】：IE下支持用var obj = new ActiveXObject() 的方式創建對象，但其它瀏覽器都會提示ActiveXObject對象未定義。?
【兼容辦法】：
(1)在使用new ActiveXObject()之前先判斷瀏覽器是否支持ActiveXObject對象，以創建AJAX對象為例：
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方法來創建對象，以創建AJAX對象為例(推薦)：
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操作?
【問題描述】：通常裝載xml文檔使用ActiveXObject對象，但除非IE外，其它瀏覽器都不支持此方法。XML文檔操作，IE和其它瀏覽器也存在不同，通常取XML對象的XML文本的方法是xml.documentElement.xml，但xml屬性只有IE支持，其它瀏覽器均不支持。查找節點是常用的方法有selectNodes和selectSingleNode，這兩個方法也只有IE支持，其它瀏覽器需要自己擴展。
【兼容辦法】
(1)裝載XML文檔：用$.ajax()，參考jquery幫助文檔
(2)xml對象轉字符串，如：
1 var stringtoxml = function(str) { //字符串轉xml對象 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對象轉字符串 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)字符串轉xml對象，如：
1 var oXML = stringtoxml("<root>" + document.getElementById("hidTaskXml").value + "</root>");(4)查找結點：可以用JQUERY同的find方法來查找結點，如：
1 var item = $(oXML).find("record");或者用原型擴展方法為XML對象添加selectNodes和selectSingleNode方法，擴展方法如下：
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()?
【問題描述】：只有IE瀏覽器支持execScript方法，其它的都不支持。但所有瀏覽器都支持window.eval()方法。
【兼容辦法】：用window.eval()方法代替window.execScript()。如
1 //window.execScript(“alert(123)”); 2 3 window.eval(“alert(123)”);5.window.createPopup()
【問題描述】：創建一個彈出窗口的方法，IE支持此方法，Safari、FireFox、Chrome都不支持，使用時會提示createPopup方法未定義。
【兼容辦法】：可用如下方法為window對象添加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()方法
【問題描述】：如下代碼：
1 var year= new Date().getYear(); 2 3 document.write(year);在IE中得到的日期是"2011"，在Firefox中看到的日期是"111"，主要是因為在 Firefox 里面getYear返回的是 "當前年份-1900" 的值。
【兼容辦法】：解決辦法是加上對年份的判斷，如:
1 var year= new Date().getYear(); 2 year = (year<1900?(1900+year):year); 3 document.write(year);也可以通過 getFullYear getUTCFullYear去調用:
1 var year = new Date().getFullYear(); 2 3 document.write(year);?7.document.all?
【問題描述】：document.all在IE、Safari下都可以使用，firefox、Chrome下不能使用
【兼容辦法】：所有以document.all.*方法獲取對象的地方都改為document.getElementById或document.getElementsByName或document.getElementsByTagName。
8.變量名與對象ID相同的問題
【問題描述】：IE下,HTML對象的ID可以作為document的下屬對象變量名直接使用，如下面的寫法：
objid.value = “123”;//objid為控件ID其它瀏覽器下則不能這樣寫。原因是其它瀏覽器下,可以使用與HTML對象ID相同的變量名，IE下則不能。
【兼容辦法】：使用document.getElementById(idName)等通用方法先獲取對象，再操行其它操作。如:?
document.getElementById(objid).value = “123”; //objid為控件ID注：最好不要取HTML對象ID相同的變量名,以減少錯誤;在聲明變量時,一律加上var,以避免歧義。
9.select元素的add方法
【問題描述】：在IE，Safari，Chrome下，select控件添加項時使用如下的方法：
document.getElementById(“select1”).add(new Options(“aa”,”aa”));但在FireFox下這樣操作會報錯。
【兼容辦法】：統一使用兼容方法，加options屬性，如下：
document.getElementById(“select1”).options.add(new Options(“aa”,”aa”));10.html元素的自定義屬性
【問題描述】：IE下元素屬性訪問方法如document.getElementById(id).屬性名，而且對于自定義屬性和非自定義屬性均有效。但在其它瀏覽器下該方法只適應于元素的公共屬性，自定義屬性則取不到。
【兼容辦法】：用jQuery的方法來取，如$(“#id”).attr(“屬性”)或用document.getElementById(id).getAttribute(“屬性”)，兩種方法都可以適用所有瀏覽器。
11.html元素innerText屬性
【問題描述】：取元素文本的屬性innerText在IE中能正常工作，但此屬性不是DHTML標準，其它瀏覽器不支持，其它瀏覽器中使用textContent屬性獲取。?
【兼容辦法】：
(1)通用方法是用jQuery方法$(“#id”).text()，如：
//document.getElementById(id).innerText; $(“#id”).text();(2)取值前判斷瀏覽器，根據具體情況取值，如：
var obj = document.getElementById(id);var str = (obj.innerText)?obj.innerText:obj.textContent;(3)也可以通過原型擴展方法來為元素添加innerText，擴展方法如下：
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屬性?
【問題描述】：innerHTML是所有瀏覽器都支持的屬性。outerHTML屬性不是DHTML標準，IE外的其它瀏覽器不支持。
【兼容辦法】：在非IE瀏覽器下必須使用擴展方法才能獲取，擴展方法如下：?
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屬性
【問題描述】：parentElement是取元素父結點的屬性，此屬性只有IE支持，其它瀏覽器均不支持。
【兼容辦法】：用parentNode屬性來獲取父結點，如：
//document.getElementById(id).parentElement； document.getElementById(id).parentNode；14.集合類對象問題
【問題描述】：IE下對于集合類對象，如forms,frames等,可以使用()或[]獲取集合類對象，Safari，Chrome也都支持，如
document.forms(“formid”) 或 document.forms[“formid”]。但Firefox下,只能使用[]獲取集合類對象。
【兼容辦法】：統一使用[]獲取集合類對象，如：?
document.forms[0];document.forms[“formid”];【注】：所有以數組方式存儲的對象都在訪問子成員時，都必須以[]方式索引得到，如常見的XML文檔遍歷，也需要改，如下：?
// xmldoc.documentElement.childNodes(1) xmldoc.documentElement.childNodes[1]15.frame操作
【問題描述】:在IE、Safari、Chrome下，用window對象訪問frame對象時，可以用id和name屬性來獲取，如
window.frameId; window.frameName;但在firefox下，必須使用frame對象的name屬性才能獲取到。
【兼容辦法】：
(1)訪問frame對象：統一使用window.document.getElementById(frameId)來訪問這個frame對象。
(2)切換frame內容：統一使用window.document.getElementById(testFrame).src=xxx.htm切換。?
如果需要將frame中的參數傳回父窗口，可以在frame中使用parent來訪問父窗口。例如：parent.document.form1.filename.value=Aqing;?
(3)iframe頁中的對象: $("#frameid").contents().find("#html控件id")?
(4)iframe頁中的iframe: $("#frameid").contents().find("#frameid1").contents();?
(5)iframe中的方法或變量：$("#frameid")[0] .contentWindow.SaveFile("false", strRet, a);?
16.insertAdjacentHTML和insertAdjacentText
【問題描述】：insertAdjacentHTML 方法是比 innerHTML、outerHTML 屬性更靈活的插入 HTML 代碼的方法。它可以實現在一個 DOM 元素的前面、后面、第一個子元素前面、最后一個子元素后面四個位置，插入指定的 HTML 代碼。不是 W3C 標準的 DOM 方法，W3C 近期在 HTML5 草案中擴展了這個方法。
insertAdjacentText 是比 innerText、outerText 屬性更靈活的插入文本的方法。它可以實現在一個 DOM 元素的前面、后面、第一個子元素前面、最后一個子元素后面四個位置，插入指定的文本。不是 W3C 標準的 DOM 方法，至今為止 W3C 的 HTML5還未涉及此方法。?
insertAdjacentHTML和insertAdjacentText可以IE、Safari、Chrome上執行，只有FireFox不支持，?
【兼容辦法】：可用以下方法進行擴展：?
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);elsethis.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屬性
【問題描述】：children是取HTML元素子結點的屬性，只有IE下支持，其它瀏覽器下用childNodes。?
【兼容辦法】：統一改為用childNodes屬性取子結點?；蛴靡韵路椒〝U展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?
【問題描述】：insertRow和insertCell是在表格中插入行或插入列的方法，在IE中使用方法如下?
var nowTB = document.getElementById("tb1"); nowTR = nowTB.insertRow(); nowTD = nowTR.insertCell(); ?Safari、Chrome下也可以正常執行，但插入行的位置不一樣IE下默認在表尾插入行，Safari、Chrome默認在表頭插入行；但在FireFox下調用會報錯。?
【兼容辦法】：下面的方法可以在所有瀏覽器上調用，而且插入行的位置都是表尾，不同之處就是執行前傳遞一個默認值。推薦使用。?
var nowTB = document.getElementById("tb1");nowTR = nowTB.insertRow(-1);nowTD = nowTR.insertCell(-1);19.document.createElement
【問題描述】：IE有3種方式都可以創建一個元素:
1 document.createElement("<input type=text>")2 document.createElement("<input>")3 document.createElement("input")Safari、FireFox、Chrome只支持一種方式:
document.createElement("input");document.setAttribute(name,value);【兼容辦法】：統一使用所有瀏覽器都支持的方法，如下：
document.createElement("input");document.setAttribute(name,value);20.瀏覽器處理childNodes的異同
【問題描述】：如下HTML代碼：
<ul id="main"><li>1</li><li>2</li><li>3</li></ul><input type=button value="click me!" οnclick="alert(document.getElementById('main').childNodes.length)">分別用IE和其它瀏覽器運行，IE的結果是3，而其它則是7。
IE是將一個完整標簽作為一個節點，而Safari、FireFox、Chrome除了上述的的情況外，也把一個標簽的結束符“>”到下一個標簽的起始符“<”之間的內容（除注釋外，包括任何的文字、空格、回車、制表符）也算是一個節點了，而且這種節點也有它們自己獨特的屬性和值nodeName="#text"。
【兼容辦法】：在實際運用中，Safari、FireFox、Chrome在遍歷子節點時，在for循環里加上
if(childNode.nodeName=="#text") continue;或者nodeType == 1 這樣，便跳過不需要的操作，使程序運行的更有效率。也可以用node.getElementsByTagName()回避。
21.document.getElementsByName
【問題描述】：在元素只有name屬性，沒有id屬性的情況下，在IE中獲取不到DIV元素，其它瀏覽器可以獲取。當前name和id屬性都存在時，所有瀏覽器都可以獲取到DIV元素。?
【兼容辦法】：盡量用ID來獲取。?
22.tr操作
【問題描述】：IE下table中無論是用innerHTML還是appendChild插入<tr>都沒有效果，因為在IE瀏覽器下tr是只讀的。而其他瀏覽器下可以這樣操作。?
【兼容辦法】：將<tr>加到table的<tbody>元素中，如下面所示：
var row = document.createElement("tr");var cell = document.createElement("td");var cell_text = document.createTextNode("插入的內容");cell.appendChild(cell_text);row.appendChild(cell);document.getElementsByTagName("tbody")[0].appendChild(row);23.移除節點removeNode()?
【問題描述】：appendNode在IE和其它瀏覽器下都能正常使用，但是removeNode只能在IE下用。removeNode方法的功能是刪除一個節點，語法為node.removeNode（false）或者node.removeNode（true），返回值是被刪除的節點。
removeNode（false）表示僅僅刪除指定節點，然后這個節點的原孩子節點提升為原雙親節點的孩子節點。
removeNode（true）表示刪除指定節點及其所有下屬節點。被刪除的節點成為了孤立節點，不再具有有孩子節點和雙親節點。?
【兼容辦法】：兼容IE和其它瀏覽器的方法是removeChild，先回到父節點，在從父節點上移除要移除的節點。
// 為了在IE和其它瀏覽器下都能正常使用，取上一層的父結點，然后remove。 node.parentNode.removeChild(node);24.expression
【問題描述】：IE下樣式支持計算表達式expression，但其它瀏覽器不支持，而且IE以后高版本也可能不再支持這種樣式，所以不允許使用。下面是通常使用的情況：
<div id=”content”style=’height:expression(document.body.offsetHeight-80)”></div>【兼容辦法】：去掉樣式設置，將其寫到函數中，分別在頁面加載完畢和頁面尺寸發生變化時執行。如下：
$(function(){$(“#content”).height($(document.body).height()-80); })$(window).resize(function(){$(“#content”).height($(document.body).height()-80); });25.Cursor
【問題描述】：Cursor的hand屬性只有IE支持，其它瀏覽器沒有效果，如：?
<div style=”cursor:hand”></div>【兼容辦法】：統一用pointer值，如：
<div style=”cursor: pointer”></div>26.CSS透明問題
【問題描述】：IE支持但其它瀏覽器不支持的透明樣式如下：
<div style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=20);width:200px;height:200px;background-color:Blue">ddddd</div>其它瀏覽器支持但IE不支持的透明樣式如下：
<div style="opacity:0.2;width:200px;height:200px;background-color:Blue">ddddd</div>【兼容辦法】：利用”!important”來設置元素的樣式。Safari，FireFox，Chrome對于”!important”會自動優先解析，然而IE則會忽略。如下
<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
【問題描述】：pixelHeight\pixelWidth是元素的高度和寬度樣式，通常獲取方法是：?
obj.style.pixelWidth;obj.style.pixelHeight;IE，Safari，Chrome都支持此樣式，返回的值是整數，FireFox不支持
【兼容辦法】：所有瀏覽器都支持obj.style.height，但返回的值是帶單位的，如“100px”?？梢杂萌缦路椒▉慝@取：
parseInt(obj.style.height)28.noWrap
【問題描述】：nowrap 屬性是被廢棄的屬性。
【兼容辦法】：使用 CSS 規則 white-space:nowrap 代替這個屬性。
29.CSS的float屬性
【問題描述】：Javascript訪問一個給定CSS 值的最基本句法是：object.style.property，但部分CSS屬性跟Javascript中的保留字命名相同，如"float"，"for"，"class"等，不同瀏覽器寫法不同。
在IE中這樣寫：
document.getElementById("header").style.styleFloat = "left";在其它瀏覽器中這樣寫：
document.getElementById("header").style.cssFloat = "left";【兼容辦法】：兼容方法是在寫之前加一個判斷，判斷瀏覽器是否是IE：
if(jQuery.browser.msie){document.getElementById("header").style.styleFloat = "left"; } else{document.getElementById("header").style.cssFloat = "left"; }30.訪問label標簽中的for
【問題描述】：for 屬性規定 label 與哪個表單元素綁定。在IE中這樣寫：
var myObject = document.getElementById("myLabel");var myAttribute = myObject.getAttribute("htmlFor");? 在Firefox中這樣寫：
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.訪問和設置class屬性?
【問題描述】：同樣由于class是Javascript保留字的原因，這兩種瀏覽器使用不同的 JavaScript 方法來獲取這個屬性。?
IE8.0之前的所有IE版本的寫法：?
var myObject = document.getElementById("header");var myAttribute = myObject.getAttribute("className");?適用于IE8.0 以及 firefox的寫法：
var myObject = document.getElementById("header");var myAttribute = myObject.getAttribute("class");另外，在使用setAttribute()設置Class屬性的時候，兩種瀏覽器也存在同樣的差異。
setAttribute("className",value);這種寫法適用于IE8.0之前的所有IE版本，注意：IE8.0也不支持"className"屬性了。setAttribute("class",value);適用于IE8.0 以及 firefox。
【兼容辦法】：
1.兩種都寫上：
1 //設置header的class為classValue 2 var myObject = document.getElementById("header"); 3 4 myObject.setAttribute("class","classValue"); 5 6 myObject.setAttribute("className","classValue");? 2.IE和FF都支持object.className，所以可以這樣寫：?
var myObject = document.getElementById("header");myObject.className="classValue";//設置header的class為classValue3.先判斷瀏覽器類型，再根據瀏覽器類型采用對應的寫法。?
32.對象寬高賦值問題
【問題描述】：非IE瀏覽器中中類似 obj.style.height = imgObj.height 的語句無效,必須加上’px’。
【兼容辦法】：給元素高度寬度附值是，統一都加上’px’，如：?
obj.style.height = imgObj.height + ‘px’;33.鼠標位置
【問題描述】：IE下，even對象有x、y屬性，但是沒有pageX、pageY屬性；Firefox下，even對象有pageX、pageY屬性，但是沒有x、y屬性；Safari、Chrome中x、y屬性和pageX、pageY都有。
【兼容辦法】：使用mX = event.x ? event.x : event.pageX;來代替。復雜點還要考慮絕對位置。?
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?
【問題描述】：IE下，event對象有srcElement屬性，但是沒有target屬性；其它瀏覽器下，even對象有target屬性，但是沒有srcElement屬性。
【兼容辦法】：
var obj = event.srcElement?event.srcElement:event.target;35.關于<input type="file">
(1) 在safari瀏覽器下的此控件沒有文本框，只有一個“選取文件”的按鈕，所有也沒有onblur事件，如果在<input type="file" οnblur="alert(0);">中用到了需要做特殊處理。
(2) 在FF瀏覽器下用<input type="file" name="file"> 上傳文件后取file.value時只能去掉文件名而沒有文件路徑，不能實現預覽的效果，可以用document.getElementById("pic").files[0].getAsDataURL();取到加密后的路徑，此路徑只有在FF下才可以解析。
(3) 在safari瀏覽器下用<input type="file" name="file"> 上傳文件后取file.value時只能去掉文件名而沒有文件路徑，不能實現預覽的效果。建議使用上傳后的路徑預覽。
36.jquery對象是否為空
jquery對象是否為空判斷，用length判斷一下
$("#hidTitle").length>0轉載于:https://www.cnblogs.com/hubing/p/3479785.html
總結
以上是生活随笔為你收集整理的跨浏览器开发工作小结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BGP笔记1
- 下一篇： 下载谷歌浏览器和谷歌驱动