整理FF與IE不兼容的問題

☆ js調試工具推薦 firefox 的 firebug 插件
        能夠給js設置斷點執行
        能夠運行時修改css樣式
        查看dom模型等
         
    ☆ IE8 自帶的developer bar也很不錯
   
             
    ☆ 打開firefox所有js警告:
        在地址欄裏錄入:about:config
        雙擊,設置 javascript option restict  打開爲true 能夠看到很多警告,利於糾錯

    ☆ IE -> firefox javascript類
         △   document.all("id")   -> document.getElementById("id")
                並且控件儘量用id,而不是name標識
               
                提示:
                如果控件只有name,沒有id, 用getElementById時:
                    IE:也可以找到對象
                    FF:返回NULL
         △   獲得form裏某個元素的方法
                elForm.elements['name'];
        
         △   取集合元素時, ie支持  [],() 2種寫法, 但是ff僅支持[],如:
                table.rows(5).cells(0)
                改爲:
                table.rows[5].cells[0]
                
         △   判斷對象是否是object的方法應該爲
                if( typeof  對象變量 == "object")
                而不是 if(對象變量 == "[object]")
               
         △     eval(對象名稱)    ->  document.getElementById              
                  FF支持eval函數
                 
         △     通過id直接調用對象
                  對象id.value = ""
                  改爲
                  document.getElementById("name").value = ""
                 
         △     obj.insertAdjacentElement("beforeBegin",objText);
                改爲用
                obj.parentNode.insertBefore(objText,obj);
                
           
         △     FF的createElement不支持HTML代碼
                  用document.write(esHTML);
                 
                  或者創建元素後再設置屬性, 對input元素來說,需要先設置type再加入到dom裏
                  var ōbj = createElement("input");
                  obj.type = "checkbox";
                 
                  var obj2 = document.getElementById("id2");
                  obj2.parentNode.insertBefore(obj,obj2);
                 
                如果是直接插入html代碼,則可以考慮用
                    createContextualFragment
                     
                 
         △     innerText -> textContent
        
         △     對象名稱中的$不能識別, 建議改爲_
                  ōbjName = "t1$spin"
                  改爲
                  ōbjName = "t1_spin"

        △      FF裏設置Attribute爲某個對象,然後再取出來,這時候對象的屬性都丟失了?
             objText.setAttribute("obj",obj);
             alert(obj.id)   //正確的名字
             obj = objText.getAttribute("obj");
             alert(obj.id) //null
            
                  在IE下沒有問題, FF對setAttribute來說,第2個參數都是字符串型的!!!
                  所以如果第2個參數是對象時,相當於調用對象的 toString() 方法了
                 
                  解決的方法是用下面的調用方式:
                  objText.dropdown_select = obj;
                 
                  ōbj = objText.dropdown_select
                 
                 
        △      className -> class
                  FF下用class代替IE下的className
                  由於class是關鍵字, 所以需要用 setAttribute/getAttribute纔行
                  setAttribute("class","css樣式名稱");
       
        △      在html裏定義的屬性,必須用getAttribute纔行
                  <td id="TD1" isOBJ="true">
                  獲取時:
                  document.getElementByID("TD1").isOBJ  總返回 undefined, IE下是可以的
                  應該用:
                  document.getElementByID("TD1").getAttribute("isOBJ")
                                   
   
        △      FF裏select控件不再是:總是在頂端顯示
                  所以可能需要設置控件的zIndex
                  IE裏覆蓋select控件的方法是, 用ifame
       
        △      對於if ( vars == undefined ) 下面的值用於判斷是等同的
                   undefined
                   null
                   false
                   0
       
       
        △      如果FF調用obj.focus(); 報錯,請嘗試改爲:
                    window.setTimeout( function(){ obj.focus(); }, 20);


       △       FF下,keyCode是隻讀的, 那把回車轉換爲tab怎麼辦? 在錄入時進行鍵值轉換怎麼辦??
                 
                  變通的方法是:
                  1. 回車跳轉 -> 自己寫跳轉處理代碼.
                      遍歷dom裏所有的元素, 找到當前元素的下一個能夠設置焦點的元素, 給其設置焦點
                     
                  2. 在能夠錄入的控件裏,
                      把選中的部分替換爲新錄入的內容: var text = String.fromCharCode(event.keyCode);
                      同時阻止按鍵事件上傳, 調用: event.preventDefault()
                            
 
       △       <button> 會被firefox解釋爲提交form或者刷新頁面???
                  需要寫標準<button type="button">
                  或者在οnclick="原函數調用(); return false;"
                 
                   
       △       在firefox裏, document.onfocus裏獲得不到實際獲得焦點的控件?
                  爲什麼document.keydown可以呢?
                 
       △       children    -> childNodes      
      
       △       sytle.pixelHeight -> style.height
      
       △       判斷函數或者變量是否存在
                if (!("varName" in window)) var VarName = 1;
               
   
          
        △      document.body.clientWidth
                                              
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
               
                如果html包含上面的語句,則應該用下面的方法獲取
                document.documentElement.clientWidth
               
        △ window.createPopup
            FF不支持
       
        △ document.body.onresize
            FF 不支持
            用window.onresize
           
            注意,頁面打開時並不會觸發onresize事件? 需要在onload裏也調用一次纔行
       
        △ box模型的問題
            IE下默認的是 content-box 爲了統一,可用設置:
           
            div, td {-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding: 0;}
           
            也可用在文檔頭加入:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
           
            但是對IE舊代碼影響較大
       
        △ 註冊事件
            IE: attachEvent
            FF: addEventListener("blur", myBlur, false);
                第1個參數事件名稱不需要帶"on"
                第3個參數false代表事件傳遞從事件對象沿dom樹往body方向傳
   
       
        △ 觸發事件
            IE: obj.fireEvent("onclick");
            FF:
               var e = document.createEvent("Events");  
               e.initEvent("click",   true,   false);  
               element.dispatchEvent(event)

        △  在事件處理函數中獲得對象句柄
            var ōThis = this;
            obj.onfocus = function(evt){
                oThis.doOnFocus(evt);
            }
  
        △ 統一事件處理框架代碼
            doOnFocus(evt){
                evt = evt || window.event;
                var el = evt.target || evt.srcElement;
               
                // 後續處理
            }
           
                     
        △  FF不支持onpropertychange事件
            但是FF裏可以定義屬性的setter方法, 如下面的:
            HTMLElement.prototype.__defineSetter__("readOnly",function(readOnly){
                // 構造虛擬的event對象
                var evt = [];
                evt["target"] = this;
                evt["propertyName"] = 'readOnly'
         
                //onpropertychange函數需要定義evt參數, 參考統一事件處理框架代碼
                if (this.onpropertychange) this.onpropertychange(evt);
            });
    
       
                       
    ☆ IE -> firefox css類  
        △ cursor:hand  ->  cursor:pointer
                               
        △ expression  firefox不支持
         在IE下expression也非常消耗CPU,所以不應該使用!!
         爲了達到較好的效果,應該建立自己的expression to javascript的處理函數
         這樣在IE和FF裏就都能用了.

        △ FILTER  firefox不支持
            filter: Alpha(Opacity=50);
         替換爲
         -moz-opacity: 0.5;

        △ text-overflow
            不支持
           
        △ transparent
            firefox下 obj.setAttribute("bgColor","#ffffff") 只支持顏色
            必須用 obj.style.backgroundColor = "transparent" 纔行

        △ FF下text控件高度與IE不同, 統一一下
            input[type=text] {
                height:20px;
            }
            注意input與[之間不能有空格!

        △ font在IE裏不能對body和td等起作用, FF可以
            統一用 font-family