zoukankan      html  css  js  c++  java
  • Javascript兼容性问题小结(容易导致浏览器不同,又不容易察觉的)

    1. img的src刷新问题
    【分析说明】先看一下代码:

    <img id="pic" onclick= "this.src= 'a.jpg'"
      src="aa.jpg" style="cursor: pointer"/>
    在IE 下,这段代码可以用来刷新图片,但在FireFox下不行。主要是缓存问题。
    【兼容处理】在地址后面加个随机数就解决了:

    <img id="pic" onclick= "javascript:this.src=this.src+'?'
         +Math.random()"src="a.jpg" style="cursor: pointer"/>

    2.nodeName 和 tagName 问题
    在Firefox中,所有节点均有 nodeName 值,但 textNode 没有 tagName 值。
    在 IE中nodeName 的使用有时会有问题。
    解决方法:
    使用 tagName,但应检测其是否为空。

    3.布局问题
    当 你在写css的时候,特别是用float: left(或right)排列一窜图片时,会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束,都无济于事。
    其实这里还有另外一个问题,就是IE对于空格的处理,firefox是忽略的而IE对于块与块之间的空格是处理的。也就 是说一个div结束后要紧 接着一个div写,中间不要有回车或者

    空格。不然也许会有问题,比如3px的偏差,而且这个原因很难发现。
    非常不走 运的是我又碰到了这样的问题,多个img标签连着,然后定义的float: left,希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了

    3px。我把标签之间的空格都删除都没有作用。
    后来的解决方法是在img外面套li,并且对li定义margin: 0,这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题,只有多多尝试才能发现原因。
    这只是一些简单的区 别,在做布局和CSS设计时候可以综合考虑,但最为有效与简单的解决兼容问题还是用TABLE表格,表格在兼容性方面有着不错 的表现.

    4.padding、margin
    padding 和margin值尽量不要缩写。最近看了一两篇文章,居然说有可能不兼容,其实我自己从来没有遇到它们
    不兼容的情况,以防万一,还是尽量不缩写好了。

    5. 键盘值的取得
    【分析说明】IE和Firefox获取键盘值的方法不同,可以理 解,Firefox下的event.which与IE下的 event.keyCode相当。关于彼此不同,可参考《键盘事件中 keyCode、which和

    charCode 的兼容性测试》
    【兼容处理】

    function myKeyPress(evt){
    //兼容IE和Firefox获得keyBoardEvent对象
    evt = (evt) ? evt : ((window.event) ? window.event : "")
      //兼容IE和Firefox获得 keyBoardEvent对象的键值
    var key = evt.keyCode?evt.keyCode:evt.which;
    if(evt.ctrlKey && (key == 13 || key == 10)){
           //同时按下了Ctrl和回车键
    //do something;
    }
    }

    6. Firefox不能对innerText支持
    【分析说明】Firefox不支持innerText,它支持textContent来实现 innerText,不过textContent没有像 innerText一样考虑元素的display方式,所以不完全与IE兼容。如果不用

    textContent,字符串里面不包含HTML代码也可以用 innerHTML代替。也可以用js写个方法实现,可参考《为firefox实现innerText属性》一文。
    【兼容处理】通过判断浏览器类型来兼容:

    if(document.all){
    document.getElementById('element').innerText = "my text";
    } else{
    document.getElementById('element').textContent = "my text";
    }

    7.访问和设置class属性
    【分析说明】同样由于class是Javascript保留字的原因,这两种浏览器使用不同的 JavaScript 方法来获取这个属性。
    IE8.0之前的所有IE版本的写法:
    myObject.getAttribute("className");
    而IE8.0 以及 firefox的写法:
    myObject.getAttribute("class");
       另外,在使用setAttribute()设置Class属性的时候,两种浏览器也存在同样的差异。
       setAttribute("className",value);
      这种写法适用于IE8.0之前的所有IE版本,注意:IE8.0也 不支持"className"属性了。
      setAttribute("class",value);适用于IE8.0 以及 firefox。
    【兼容处理】
    方法一,两种都写上:

    var myObject = document.getElementById("header");
    myObject.setAttribute("class","classValue");
    myObject.setAttribute("className","classValue");
     //设置header的class为 classValue
    方法二,IE和FF都支持object.className,所以可以这样写:

    myObject.className="classValue";
    方法 三,先判断浏览器类型,再根据浏览器类型采用对应的写法。

  • 相关阅读:
    [python] defaultdict
    [VM workstation]VM workstation 中的虚拟机连不上网络
    [Docker] docker 基础学习笔记1(共6篇)
    [python] import curses
    servlet 产生随机验证码
    JSTL标签库 sql标签
    JSTLLearning
    Ajax实现联想(建议)功能
    HDU 1241
    Servlet实现文件上传
  • 原文地址:https://www.cnblogs.com/Denny_Yang/p/1983325.html
Copyright © 2011-2022 走看看