zoukankan      html  css  js  c++  java
  • 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/
    版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处、作者信息和本

  • 相关阅读:
    298. Binary Tree Longest Consecutive Sequence
    117. Populating Next Right Pointers in Each Node II
    116. Populating Next Right Pointers in Each Node
    163. Missing Ranges
    336. Palindrome Pairs
    727. Minimum Window Subsequence
    211. Add and Search Word
    年底购物狂欢,移动支付安全不容忽视
    成为程序员前需要做的10件事
    全球首推iOS应用防破解技术!
  • 原文地址:https://www.cnblogs.com/youxin/p/2944425.html
Copyright © 2011-2022 走看看