`
wolfmaster
  • 浏览: 159110 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

IE6 and Firefox Js的区别

    博客分类:
  • js
阅读更多
  IE6 迁移到 Firefox 的工作笔记


        jxc 最后更新于: 2008-07-31


☆ 前言
   
    △ 一些参考资料
        html5规范, firefox3已经支持
        http://www.w3.org/html/wg/html5/
       
        http://nexgenmedia.net/evang/iemozguide/        
        http://www.javascriptkit.com/domref/
       
        firefox对css的扩展
        http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions
       
        关于css3的信息,能在线测试当前浏览器对css3的支持情况
        http://www.css3.info
   
    △ 使IE5,IE6支持css2.0标准的 js 扩展库 (推荐)
        http://code.google.com/p/ie7-js/
        页面load后通过js来实现, 目前对运行时动态修改css的处理还不完善
        另外毕竟js模拟的效果,大量应用会有性能问题
   
   
    △ js调试工具推荐 firefox 的 firebug 插件
        能够给js设置断点执行
        能够运行时修改css样式
        查看dom模型等
       
        最新的支持 firefox3 的 firebug 有点过于严格了, 造成很多代码都提示错误
   
    △ IE8 自带的developer bar也很不错
   
   
    △ 关于调试js的tip
        调试js时,经常受缓存的影响,页面不会加载最新的代码,为此解决如下:
        在新页面里打开原来的地址,关闭原来的页面,ok了.
       
        在ff下按Ctrl+shift+del, 打开清除私有信息对话框, 点击立即清除, 回到页面后reload一次也是可行的方案.



☆ javascript 相关
    △ 这里也有部分总结
        http://www.cnitblog.com/joyboy/archive/2008/07/01/42429.html
       
    △  document.all("id")   -> document.getElementById("id")
        并且控件尽量用id,而不是name标识
        提示: form 内用于提交的元素必须定义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(obj) == "object")

   
    △  eval(对象名称)    ->  document.getElementById              
        FF支持eval函数
   

    △  在当前对象的前面插入节点
        obj.insertAdjacentElement("beforeBegin", elText);
        改为用
        obj.parentNode.insertBefore(elText, obj);
   
   
    △  FF的createElement不支持HTML代码
        用document.write(esHTML);
   
        或者创建元素后再设置属性, 对input元素来说,需要先设置type再加入到dom里
        var elInput = createElement("input");
        elInput.type = "checkbox";
       
        var obj2 = document.getElementById("id2");
        obj2.parentNode.insertBefore(elInput, obj2);
   
        如果是直接插入html代码,则可以考虑用
        createContextualFragment
   
   
    △  innerText -> textContent
        FF 没有innerText
        如果确定没有html代码, 也可以统一用 innerHTML
   
    △  对象名称中的$不能识别, 建议改为_
        objName = "t1$spin"
        改为
        objName = "t1_spin"
       
    △  FF里设置Attribute为某个对象,然后再取出来,这时候对象的属性都丢失了?
        elText.setAttribute("obj", obj);
        alert(obj.id)   //正确的名字
       
        obj = objText.getAttribute("obj");
        alert(obj.id) //null
       
        在IE下没有问题, FF对setAttribute来说,第2个参数都是字符串型的!!!
        所以如果第2个参数是对象时,相当于调用对象的 toString() 方法了
       
        解决的方法是用下面的调用方式:
        elText.obj = obj;       
        obj = elText.obj
   
   
    △  在html里定义的属性,必须用getAttribute才行
        <input type="text" id="t1" isOBJ="true">
       
        获取时:
        document.getElementById("t1").isOBJ  总返回 undefined, IE下是可以的
       
        应该用:
        document.getElementById("t1").getAttribute("isOBJ")
        
            
    △  el.class -> el.className
        由于class是关键字, 所以需要用 className
        或者用 setAttribute/getAttribute
        setAttribute("class","css样式名称");
      
   
    △  FF里select控件不再是:总是在顶端显示
        需要设置控件的zIndex
        IE6 里select控件总在顶端显示, div不能盖住select
        覆盖select控件的方法是, 用 ifame 盖住 select, 再设置div元素的zIndex大于iframe的zIndex
   
    △  对于if ( vars == undefined ) 下面的值用于判断是等同的
        undefined
        null
        false
        0
   
   
    △  如果FF调用 el.focus(); 报错
        尝试改为:
        window.setTimeout( function(){ el.focus(); }, 20);
   
   
    △  FF下,keyCode是只读的, 那把回车转换为tab怎么办? 在录入时进行键值转换怎么办??
   
        解决方案:
        1. 回车跳转 -> 自己写跳转处理代码.
            遍历dom里所有的元素, 找到当前元素的下一个能够设置焦点的,当前可见的元素, 给其设置焦点
            如果该元素的父节点是不可见的, 则还是会报错, 所以设置焦点时, 需要try catch, 如果报错,则继续找下一个
       
        2. 录入时进行键值转换.
            利用selection,选中光标后面的内容,替换为新输入的内容
        
   
    △  <button> 会被firefox解释为提交form或者刷新页面???
        需要写上type <button type="button">按钮</button>
        或者在onclick="原函数调用(); return false;"
   
   
    △  在firefox里, document.onfocus里获得不到实际获得焦点的控件?
        为什么document.keydown可以呢?
   
    △  children    -> childNodes      
   
    △  sytle.pixelHeight -> style.height
   
    △  判断函数或者变量是否存在,没有则创建
        if (!("funcA" in window)) var funcA = function() { alert("请覆写funcA方法"); };
       
   
    △  获得客户区尺寸
        IE里与doctype有关
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
       
        如果html包含上面的语句,则应该用下面的方法获取
        document.documentElement.clientWidth
        否则用
        document.body.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
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
       
        但是对IE旧代码影响较大
   
    △  注册事件
        IE: el.attachEvent
        FF: el.addEventListener("blur", myBlur, false);
            第1个参数事件名称不需要带"on"
            第3个参数false代表事件传递从事件对象沿dom树往body方向传(与IE的方向一致)
           
            ff里如果不指定 el 则是给全局的事件注册?? 全局岂不是window?
           
           
   
    △  触发事件
        IE: el.fireEvent("onclick");
        FF:
        var e = document.createEvent("Events");  
        e.initEvent("click",   true,   false);  
        element.dispatchEvent(event)
   
    △  在自定义函数中获得对象句柄
        var oThis = this;
        obj.onfocus = function(evt){
            oThis.doOnFocus(evt);
        }
   
    △  统一事件处理框架代码
        function 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 ("onpropertychange" in this) this.onpropertychange(evt);
            }
        );

    △ document.activeElement
        用途: 在当前对象的 onblur 事件里, 可以通过 activeElement 获得下一个获得焦点的对象
       
        html5规范里加入
       
        firefox3里已经支持,与IE里效果一样
       
       
       
   
☆ css 相关
   
    △  cursor:hand  ->  cursor:pointer
           

    △  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等起作用
        统一用 font-family

       
    △  expression  firefox不支持
        expression的确能够解决IE6对css2支持不足的问题,这样只需要定义css就可以兼容IE和FF了
        在IE下expression非常消耗CPU, 所以不建议在大量的element上应用!!

       
    △  IE6 仅支持 a:hover, 不支持其它对象的 :hover
       
        1. 加入下面的css
            .ie-hover {
                behavior: expression(
                    this.onmouseover = new Function("this.className = 'hover';"),
                    this.onmouseout = new Function("this.className = 'ie-hover';"),
                    this.style.behavior = null
                );
            }
           
            上面必须用 this.style.behavior = null , 否则某些情况会有严重的性能问题
           
           
        2. 在需要 :hover 的元素上增加 class
            <li class="ie-hover">
           
        3. 定义 :hover 样式同时定义 .hover 样式
            ul li:hover , ul li.hover {
                xxx
            }
           

    △  IE6里 <a> 必须定义href属性  a:hover 才有效

分享到:
评论

相关推荐

    difference between IE and Firefox

    在压缩包"develop in IE and Firefox"中,可能包含的是针对这两种浏览器开发的示例代码、测试用例或解决兼容性问题的策略,可以帮助开发者更好地理解并处理IE和Firefox之间的差异。通过深入研究这些文件,开发者可以...

    firebug for IE6+, Firefox, Opera, Safari and Chrome

    标题提到的"firebug for IE6+, Firefox, Opera, Safari and Chrome",意味着这是一个跨浏览器的解决方案,旨在为开发者提供在不同浏览器上调试和优化网页的能力。 Firebug Lite是Firebug的轻量级版本,适用于不支持...

    IE和Firefox在css,JavaScript方面的兼容性

    标题与描述均聚焦于“IE和Firefox在css,JavaScript方面的兼容性”,这涉及到网页开发中一个重要的议题:浏览器兼容性。在web开发中,确保代码能在不同浏览器上正常运行是至关重要的,因为用户可能使用各种不同的...

    网页兼容问题、IE、FireFox

    在网页开发过程中,兼容性问题始终是一个不可忽视的挑战,特别是在面对不同的浏览器,如Internet Explorer(IE)和Firefox时。本文将深入探讨IE5至IE9以及Firefox的兼容性问题,解析解决这些问题的方法,以及如何...

    图片浏览直接显示[兼容IE,FireFox]

    "图片浏览直接显示[兼容IE, FireFox]"这个标题暗示了我们要讨论的是如何在两种主流浏览器——Internet Explorer(IE)和Firefox中实现图片的无缝浏览体验。尽管IE浏览器已经不再更新,但在某些环境下仍被使用,因此...

    IE与火狐浏览器兼容方案

    本文将深入探讨如何解决IE(Internet Explorer)与火狐浏览器(Firefox)之间的兼容问题,以便用户在各种浏览器上都能获得一致的浏览体验。 首先,了解问题的根源至关重要。IE(尤其是早期版本)和火狐浏览器在执行...

    使网页变灰,支持IE、FireFox、Opera、360浏览器等

    标题 "使网页变灰,支持IE、FireFox、Opera、360浏览器等" 提到的是一个关于实现网页变灰效果的技术,这个效果通常在网站上用于表示哀悼或者纪念活动,将整个页面调成灰色。这个技术涉及到浏览器兼容性和JavaScript...

    ajax 拖拉图片(同时适用IE,FIREFOX)

    在本案例中,我们讨论的主题是如何利用AJAX(异步JavaScript和XML)技术来实现在网页上对图片进行拖放操作,同时兼容IE和Firefox两种主流浏览器。 首先,我们需要了解AJAX的基本概念。AJAX是一种在不重新加载整个...

    支持IE6,IE7,IE8矩形圆角的实例

    在早期的Internet Explorer浏览器,即IE6、IE7和IE8,它们并不支持CSS3中的许多新特性,其中就包括了实现矩形元素圆角的方法。然而,开发者们通过一些技巧来模拟圆角效果,使得这些旧版IE浏览器也能呈现出类似的效果...

    ajax兼容IE,FF问题

    IE6及以下版本在GET请求中会自动对URL进行编码,而Firefox则不会。因此,如果你的URL参数包含特殊字符,可能需要在所有浏览器中手动进行编码。 此外,IE和Firefox对于异步请求的触发方式也有所不同。在IE中,我们...

    兼容IE与火狐的拖动div效果

    本文将详细讲解如何实现一个兼容IE和Firefox的拖动div效果。 首先,我们需要了解两种浏览器对拖放事件的支持情况。Internet Explorer(IE)从版本5.5开始支持DOM级别的拖放,而Firefox则从版本3.5开始支持W3C标准的...

    Ajax FireFox IE 乱码兼容问题

    在IT领域,特别是Web开发中,字符编码的处理是一大挑战,尤其是在跨浏览器、跨平台的环境下,如在Ajax请求中遇到的FireFox与IE之间的乱码兼容问题。本文将深入探讨这一问题,并提供详细的解决方案。 ### Ajax与字符...

    JS读取本地XML(支持IE和火狐和Google和Opea)

    以下是对"JS读取本地XML(支持IE和火狐和Google和Opea)"这个主题的详细讲解: 1. **FileReader API**: 浏览器提供了一个名为`FileReader`的API,允许我们读取用户选择的本地文件,包括XML文件。`FileReader`对象有...

    如何解决IE兼容性问题

    - 适用于IE6、IE7和Firefox: ```css #example { height: 100px; /* Firefox 和 IE7 */ _height: 200px; /* IE6 */ *+height: 300px; /* IE7 */ } ``` #### 三、条件注释技术 除了使用CSS Hack外,还可以...

    关于iframe中生成父窗口元素及增加event事件的问题(IE已实现,Firefox暂未实现)

    // Firefox and others else if (window.parent.document.addEventListener) { window.parent.document.addEventListener('click', function() { console.log('Parent clicked in other browsers'); }, false); }...

    html判断IE版本

    在Web前端开发中,识别用户使用...然而,随着IE浏览器逐渐被淘汰,开发者也应考虑逐步停止对IE的支持,转向更现代的浏览器,如Chrome、Firefox、Safari和Edge等,它们对Web标准的遵循更加一致,能提供更好的用户体验。

    火狐OCX插件

    火狐OCX插件是一种技术实现,使得Firefox浏览器能够兼容原本仅适用于Internet Explorer(IE)浏览器的ActiveX控件,即OCX(Object Linking and Embedding, Control eXtension)组件。OCX是微软在Windows平台上开发的...

    js写的可展开收缩的QQ在线客服代码,兼容IE8-10,Chrome,Safari,Firefox等主流浏览器.rar

    该压缩包包含的是一个使用JavaScript编写的QQ在线客服系统,其特点是支持在多个主流浏览器上运行,包括较为老旧的Internet Explorer 8至10,以及现代的Chrome、Safari和Firefox。JavaScript是一种广泛用于网页开发的...

Global site tag (gtag.js) - Google Analytics