• Firefox/Chrome/IE浏览器关于CSS和JavaScript的兼容性


     1. 在Firefox浏览器中,style.visibility = "visible"无效的问题

    很多人都遇到过这个问题:style.visibility 设置为 hidden 时有效,visible 却无效。

    onClick="javascript: ShowLoginFrame()"
     

    2. Alpha滤镜的CSS兼容性

    filter:Alpha(opacity=80);

    在IE6环境中,可以工作,IE8及更高版本必须使用:

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

    Chrome和Firefox则使用这样的滤镜:

    opacity: .8;

    3. style.left(style.top)是用来赋值的,若想获取位置,则使用offsetLeft(offsetTop)

    假如style.left(style.top)已经被赋值了,在IE环境中是可以随便拿来用的,但Chrome和Firefox不行。通用的方法是:

    document.getElementById(idStr).offsetLeft 或者document.getElementById(idStr).offsetTop
     

    4. 给网页元素指定位置

    cover.style.left= 240

    这行代码在IE里面是没有问题的,但Chrome和Firefox不这样认为。后面加上px才是一个各方都认可的方案。

    cover.style.left= 240px
     

    5. Firefox不能直接使用元素的id?

    Firefox似乎不允许直接使用元素的id,你必须通过 document.getElementById 操作这个元素。IE和Chrome则不存在这个问题。
     

    6. 关于高度和宽度

    通常,我需要两个高度(或者宽度):可视区域的高度(或者宽度)和网页内容的高度(或者宽度)。

    document.documentElement.clientHeight

    Firefox/Chrome/IE 对上面这一句的解释保持一致:表示可视区域的高度。如果把clientHeight 换成offsetHeight的话,Firefox/Chrome则认为这是网页内容的高度,IE仍然坚持原先的观点。如果把document.documentElement替换为body的话,不管是clientHeight 还是offsetHeight,Firefox/Chrome/IE 又保持了一致的观点:这是网页内容的高度。
     

    7. 获取表单信息

    IE和Chrome浏览器中,使用document.loginForm.account.value就能读到表单loginForm里面的account的值,唯有Firefox不可以。Firefox认可的标准写法是:

    document.loginForm.elements["account"].value

    事实上,IE和Chrome也兼容这个写法。
     

    8. 不可理喻的规定:Firefox中的submit按钮

    习惯在 button 的 onClick 事件上绑定行为,即使这个行为是提交表单,我也很少使用 submit 按钮。现在,要考虑兼容Firefox的话,就必须改变这一习惯了,因为,没有submit 按钮的话,document.loginForm.submit() 居然不能被执行!可是,要想在 submit 之前做点什么的话,比方说,数据校验,那就太不方便了。

    万幸的是,使用 <input type='submit' style='display:none' /> 
     

    9. Firefox中file类型的input如何调整长度?

    <input type="file" name="浏览" value ="" style=" 320px;">

    很显然,我想设置这个input长度为320点。IE的效果和我想象的一样;Chrome的浏览按钮跑到了左侧,并且是在输入框中,虽然怪异,但长度是我期望的;Firefox却根本不认这一套。实验了半天,得到了这样一个怪异的结果:

    <input type="file" name="浏览" value ="" size="35" style="320px;">

    size没有单位,也不是百分比,数值也很怪异,可是,只有这么写,才能同时被三种浏览器兼容!
     

    10. 兼容的XMLHttpRequest

    以前还真没怎么考虑过 XMLHttpRequest 的兼容性,只用 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP") 包打天下,现在看来真的行不通了。读了很多代码之后,终于有了自认为最简洁的兼容方案:

    if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlHttp=new XMLHttpRequest();
    } else { 
    // code for IE6, IE5
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
     

    11. xmlHttp.responseText 中文乱码?交给PHP好了!

    xmlhttp 默认的编码似乎是UTF-8,如何改变,不得而知。如果 xmlHttp 传递的信息包含中文,这意味着,服务端必须能够处理UTF-8编码的字符串。可是,很多时候,整个系统(包括数据库)使用的是GB2312编码,在哪儿完成这个编码转变呢?PHP5为我们提供了极大的便利:

    From UTF-8 To GB2312: iconv("UTF-8", "GB2312", string) 
    From GB2312 To UTF-8: iconv("GB2312", "UTF-8", string)
     

    12. 兼容insertRow 和insertCell 的方案

    网络上关于这个兼容性的问题,有很多错误的说法。IE和Firefox的最大分歧在于,前者允许insertRow() 和insertCell() 不带任何参数,表示插入到最后,后者要求insertRow 和insertCell 必须带任何参数,用-1表示插入到最后。同理,deleteRow 也是如此。

    为新插入的Row和Cell设定属性,在兼容性上也有一些麻烦,需要特别注意。

    newRow = document.getElementById('TableId').insertRow(-1);
    newRow.setAttribute('height', 24);
    newRow.style.backgroundColor = "#FFFFFF";
    newCell = newRow.insertCell(-1);
    newCell.align = 'center';
    newCell.innerHTML = '<input type="text" name="name" value ="">';
     

    13. submit之后的刷新问题:parent.location.reload

    在iframe 中 submit,然后使用 parent.location.reload() 刷新 parent 页面,IE和Chrome没问题,Firefox却要求重新发送。后来学习了location.reload()的用法,发现这个方法是有一个bForceGet参数,默认值false,难道,意思是不强制以 get 方式刷新?换成 parent.location.reload(true),成功!

    原载: 捕风捉影博客 http://xufive.blog.163.com/blog/static/1723261682011971045158/
    版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处、作者信息和本

  • 相关阅读:
    Cisco网络模拟器踩坑记录
    PAT甲级1009水题飘过
    PAT甲级1011水题飘过
    springmvc中项目启动直接调用方法
    Eclipse中Java文件图标由实心J变成空心J的问题
    mysql求时间差
    maven常用命令
    java单例模式(两种常用模式)
    mybatis一对多,多对一
    mybatis简介
  • 原文地址:https://www.cnblogs.com/youxin/p/2944425.html
Copyright © 2020-2023  润新知