欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

<转>整理FF与IE不兼容的问题

程序员文章站 2022-05-22 12:39:56
...

☆ 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