zoukankan      html  css  js  c++  java

  • 跨浏览器开发工作小结(转载)

    本篇小结是在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" ? '
' : 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.insertRowinserCell 

    　　【问题描述】：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);200px;height:200px;background-color:Blue">ddddd</div>

    　　其它浏览器支持但IE不支持的透明样式如下：

    <div style="opacity:0.2;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);200px;height:200px;background-color:Blue;!important; opacity:0.2">ddddd</div>

    27.pixelHeightpixelWidth

    　　【问题描述】：pixelHeightpixelWidth是元素的高度和宽度样式，通常获取方法是： 

    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判断一下

    $("#hidTitle").length>0
     
     
    转载：http://www.cnblogs.com/eagle927183/p/3478206.html
  • 相关阅读:
    rs
    stm32f767 usoc3
    stm32f767 RTT 日志
    stm32f767 标准库 工程模板
    stm32f767 HAL 工程模板
    docker tab 补全 linux tab 补全
    docker anconda 依赖 下载 不了
    docker run 常用 指令
    linux scp 命令
    Dockerfile 常用参数说明
  • 原文地址：https://www.cnblogs.com/ningyanbo/p/3479678.html
Copyright © 2011-2022 走看看