Firefox和IE兼容性问题.docx

Firefox和IE兼容性问题.docx

《Firefox和IE兼容性问题.docx》由会员分享，可在线阅读，更多相关《Firefox和IE兼容性问题.docx（9页珍藏版）》请在冰豆网上搜索。

Firefox和IE兼容性问题

IE火狐浏览器兼容问题大全

1.最简单的鼠标移过手变型的css要改了cursor:

pointer;/*Firefox不支持cursor:

hand*/dw8下面自动出来的也没有hand这个属性了，标准的是pointer

2.Firefox不支持滤镜最常见的半透明不支持。

filter:

Alpha（Opacity=50）;/*forIE*/

opacity:

.5;/*forFirefox*/

style="-moz-opacity:

0.5;filter:

alpha（opacity=50）;cursor:

hand;"onmouseover="this.style.MozOpacity=1;

this.filters.alpha.opacity=100"onmouseout="this.style.MozOpacity=0.5;

this.filters.alpha.opacity=50"

3.Firefox不支持expression例如去掉链接的边框要分别写不同的css

a,area{blr:

expression（this.onFocus=this.blur（））}/*forIE*/

:

focus{outline:

none;}/*forFirefox*/

4.Firefox不支持div滚动条的颜色设置，目前还没有找到替换的好方法。

.contendiv{

position:

absolute;left:

0px;top:

10px;width:

580px;height:

135px;

line-height:

120%;text-align:

left;font-family:

"宋体";word-break:

break-all;color:

#6D6E71;

OVERFLOW-Y:

auto;OVERFLOW-X:

no;

SCROLLBAR-ARROW-COLOR:

red;SCROLLBAR-TRACK-COLOR:

F6F6F6;SCROLLBAR-FACE-COLOR:

#F6F6F6;SCROLLBAR-SHADOW-COLOR:

#F6F6F6;

SCROLLBAR-DARKSHADOW-COLOR:

#F6F6F6;SCROLLBAR-3DLIGHT-COLOR:

#F6F6F6;SCROLLBAR-HIGHLIGHT-COLOR:

#F6F6F6;

}

这个在Firefox里面完全没有效果了。

5.ie下面显示在文字下面横线的border-width:

0px0px1px0px;在Firefox里面跑到文字上面去了。

（查了手册还是没有找到解决的办法感觉莫名奇妙～～原来是Firefox的容错能力太差了，是下面的width:

186px;height:

0px;宽高引起的，其实a:

haver已经继承了上级的属性了，只要定义不同的样式就可以了，看来Firefox有助于制作标准化，简洁化的网页啊，对css的理解也更深刻，对提供css来说是个很好的帮助）

.onelinksdiva:

hover{

display:

block;border-style:

solid;color:

#Firefox0000;border-width:

0px0px1px0px;

/*

display:

block;border-style:

solid;border-width:

0px0px1px0px;

width:

186px;height:

0px;color:

#Firefox0000;font-size:

14px;text-align:

right;

*/

}

//下面的写法在ie下面正常，但在Firefox下是错误的

.onelinksdiva:

hover{

display:

block;border:

#Firefox0000solid;border-width:

0px0px1px0px;

width:

186px;height:

0px;color:

#Firefox0000;font-size:

14px;text-align:

right;

}

相关参考资料：

border-width:

border-top-widthborder-right-widthborder-bottom-widthborder-left-width;

p#fourborders

{

border-width:

thickmediumthin12px;

}

如果定义四个值,那么这四个值就分别是上,右,下,左边框的宽度值（从上边框开始,以逆时针的顺序遍历）.

等价于下面的定义

p#fourborders

{

border-top-width:

thick;

border-right-width:

medium;

border-bottom-width:

thin;

border-left-width:

12px;

}

6.Firefox不支持scroll属性，必须定义overflow:

hidden;而且要在html标签下，不能在body下

html{

overflow:

hidden;

}

7.Firefox不支持数据岛绑定在ie下可以加载进数据，但到了火狐就加载不进数据了，开始以为可能是因为内容行文字太多导致不能断行不能加载，但删除只剩几个字以后一样不行。

8.style="word-break:

break-all"在网页中的单元格里的内容超出一行时,在ie浏览器里定义的换行样式能够正常使用,但在firefox里却不能被支持了.style="word-break:

break-all"是MS扩展的IE专有属性，并未成为W3C标准，因而Firefox还不能支持它。

不过MS已经将其提交到了W3C，而在W3C的CSS3的候选方案中也能看到它。

希望这个属性在被W3C最终定案的为CSS3标准后，Firefox可以支持吧。

这之前，可以试试

style="table-layout:

fixed;word-wrap:

break-word"（当它是英文的时候就不能正常换行了）

9.目前Firefox2.0为止都不支持IE的name锚点

像这种写法都是不支持的：

goback

原来根据W3C的语法，标签始终都会查找href地址并跳转过去，现在onclick事件与###这个地址又有冲突。

为了让Firefox与IE部分元素属性兼容，那个费劲，我无意中发现Firefox对空格敏感：

page=messages#2'">//有空格，锚点作用

page=messages#2'">//无空格，锚点无作用

锚点的写法又十分讲究，比如，Firefox不支持锚点，得加上id=#1

静态同页面引用时必须这样写：

，就不行，动态页面要用JS

后遗症来了，考虑到鼠标样式和浏览器兼容又开始折腾：

//不兼容

;"onclick="">//不兼容

function（）;">//没有{...},属于脚本的非法书写

hand"onclick="">//没照顾到自定义系统鼠标样式的用户

onclick=''">//状态栏会显现，href有多长显示多长

//我用的

10.Firefox火狐下面不支持document.all属性的，必需用document.getElementById（'idName'）;

以下是我的动画切换效果，在ie下正常，到了火狐里面就不动了，修改后可以切换图片但渐隐渐现的效果就没有了。

原因是火狐不支持滤镜filter,只好用半透明的div来实现了。

/*

companypage

*/

functionplaycompanyimg（）

{

window.setInterval（'changecompanyimg（）;',interval）;

}

functionchangecompanyimg（）

{

/*

火狐下面不支持document.all属性的，必需用document.getElementById（'idName'）;

*/

//if（document.all）

//{

/**

以下两句是在切换效果前切换背景图片的代码，number、image和idtemp要设置全局变量才可以

*/

　　number=Math.floor（Math.random（）*image.length）;

idtemp.src=image[number];

//alert（number+"ii"+idtemp.src）

/**

以下两句是实现幻灯片切换效果的

*/

//alert（do_transition）;

//panyimg.style.filter="progid:

DXImageTransform.Microsoft.Fade（duration=2,overlap=0.4）";

/*

panyimg.style.filter="progid:

DXImageTransform.Microsoft.Fade（duration=1,overlap=1）";

panyimg.filters[0].Apply（）;

panyimg.filters[0].Play（）;

*/

varcompanyimgidtmep=document.getElementById（'companyimg'）;

companyimgidtmep.style.filter="progid:

DXImageTransform.Microsoft.Fade（duration=1,overlap=1）";

companyimgidtmep.filters[0].Apply（）;

companyimgidtmep.filters[0].Play（）;

//}

}

参考资料：

核心：

FILTER:

revealTrans（duration=1,transition=23）;一个IE滤镜，

在其它的非IE浏览器虽然不支持这个滤镜，但是支持透明滤镜的，你可以分一下，IE下继续使用你这个效果，而在非IE浏览器下用透明滤镜：

style.opacity

opacity=0.5CSS3

style.MozOpacity

-moz-opacity:

0.5Mozilla里等同上面这个滤镜这个滤镜也适用于Netscape

style.KHTMLOpacity

-khtml-opacity:

0.5Safari里的透明滤镜。

IE：

obj.filters.alpha.opacity

tomeizz（梅花雪）

其实我想过你那个问题的。

但是透明opacity这个他不是一个渐变的过程。

一般这种图片过度特效最多持续一秒把，最多最多两秒duration=2

超过2秒就很累赘，喧宾夺主了。

在2秒钟里面实现

g_img.style.filter="alpha（opacity="+i+"）"透明度的变化是比较累赘的事情。

要用window.setInterval改变i的值，而且还要调用几十上百次window.setInterval

才能看到效果。

这样的话，我觉得得不赔失，是为了特效而特效了

另外一种考虑是，毕竟非ie浏览器是少数，即使在Firefox下没有图片过度特效，其实也没什么，

还是很流畅，不过就是看不到ie里面的美而已。

11.Firefox下链接的onclick事件不起作用

onclick=display（'whatwedo'）"target="">我们做什么