<转>整理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">
                  或者在onclick="原函数调用(); 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