-想您所想,多年经验-
白狐广告电话
白狐广告标志
当前位置:网站首页 - 信息中心
Firefox/Chrome/IE浏览器关于CSS和JavaScript的兼容性
2014-7-16|阅:2336|来自:白狐广告

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

很多人都遇到过这个问题:style.visibility 设置为 hidden 时有效,visible 却无效。网上搜索一下,答案真是五花八门,有人说,用inline 替换 visible 可以,有人说,style.display 有效。我的发现似乎没那么复杂。一开始,我的代码是这样的:

        onClick="this.style.visibility = ’visible’"

IE和Chrome可以工作,Firefox不起作用。后来改为调用函数,仍然无效:

        onClick="ShowLoginFrame()"

再后来,写得更规范一下,呵呵,居然可以工作了!

        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也兼容这个写法。唉!连人家IE和Chrome都迁就Firefox了,我等还有什么可说的呢?

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=" width:320px;">

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

<input type="file" name="浏览" value ="" size="35" style="width: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

submit 之后刷新网页,会遇到“是否再次提交”一类的询问,这个问题我一直没找到解决方案。现在,又遇到了新的问题:在iframe 中 submit,然后使用 parent.location.reload() 刷新 parent 页面,IE和Chrome没问题,Firefox却要求重新发送。无奈之下,重新学习了location.reload()的用法,发现这个方法是有一个bForceGet参数,默认值false,难道,意思是不强制以 get 方式刷新?换成 parent.location.reload(true),哈哈,成功!

<style type="text/css">

/*还有一个很有用的经验,就是第一条css这样写:*/
*{
margin:0;
padding:0;
}

.ok { color:red; /* 所有浏览器都支持 */

      color:blue\9;/* IE7、IE8、IE9支持 CSS hack写法*/
  
      +color:yellow;/* IE7支持 */

      _color:green;}/* IE6支持 */
  
@media screen and (-webkit-min-device-pixel-ratio:0) { .ok {color:orange} } /* GoogleChrome、Safari3.0、Opera9一样的Webkit引擎支持 */
</style>
<div class="ok">IE6:绿色;IE7:黄色;IE8:蓝色;谷歌、欧朋、苹果:橘黄;火狐和其它:红色;</div><br />
注意:*+html 对IE7的HACK 有的时候必须保证HTML顶部有如下声明:<br />
〈!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"〉


标 签: CSS浏览器兼容 JavaScript浏览器兼容

www.internetzg.com Copyright 2014-2020 | 以上内容白狐广告保留解释权,任何个人或单位不得抄袭COPY本公司网站内容,违者必究。

 

↑上一篇文章: form元素的一些深入研究与理解
返回目录    ↓下一篇文章: asp强制转换函数

白狐网站建设 白狐设计专门从事网站建设平面广告设计,专业致力于为企业及个人提供优质网站设计(网站建设、网站改版)网站优化推广域名空间画册设计(企业画册设计、产品画册设计、样本设计)印刷彩页单页设计印刷名片T恤衫设计制作台历挂历设计制作标志设计( LOGO设计、商标设计)产品包装设计制作艺术照片设计等。公司是由一流的设计师和专业的制作人员组成的运营团队,拥有多年的网站及广告设计制作经验,服务客户遍及北京、河北、山东、江苏等地区。
首 页 | 关于白狐 | 网站建设 | 平面广告 | 产品服务 | 合作伙伴 | 人才招聘 | 友情链接 | 网站地图 | 联系我们 | 站内搜索
白狐广告www.internetzg.com 网站最佳分辨率为1024*768 京ICP备06068476号
白狐广告服务电话:010-53312027 
13693231513技术 13522191688业务 15011320345售后 15810850699优化
北京网站建设,手机网站建设,北京网站建设公司,北京 北京白狐广告有限责任公司 版权所有
白狐广告公司地址:北京市朝阳区朝阳路8号朗廷大厦A座312室 邮编:100024
返回白狐广告顶部