跨瀏覽器開發工做小結

時間 2019-11-10

原文原文鏈接

　　本篇小結是在2011年時候總結的，當時作一個產品的跨瀏覽器兼容工做，因爲產品開發的時間比較早，最開始只能在IE下面(IE 八、IE 9還有點點問題)使用，作跨瀏覽器兼容工做的時候，主要是適配IE 6--IE 九、Safari、FireFox、Chrome，引入了jQuery框架進行改造後，大部分功能能夠正常使用，現將總結分享一下。css

1.eval(idName)html

　　【問題描述】：IE、safari、Chrome瀏覽器下均可以使用eval(idName)或getElementById(idName)來取得id爲idName的HTML對象；firefox下只能使用getElementById(idName)來取得id爲idName的HTML對象.node

　　【兼容辦法】：統一用getElementById("idName")來取得id爲idName的HTML對象。jquery

2.ActiveXObject ajax

　　【問題描述】：IE下支持用var obj = new ActiveXObject() 的方式建立對象，但其它瀏覽器都會提示ActiveXObject對象未定義。 express

　　【兼容辦法】：設計模式

　　(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操做 app

　　【問題描述】：一般裝載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);
                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屬性

　　【問題描述】：children是取HTML元素子結點的屬性，只有IE下支持，其它瀏覽器下用childNodes。

　　【兼容辦法】：統一改成用childNodes屬性取子結點。或用如下方法擴展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!" onclick=

"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爲classValue

　　3.先判斷瀏覽器類型，再根據瀏覽器類型採用對應的寫法。

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" onblur="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判斷一下