IE与Firefox区别

IE和Firefox下的Javascript
1、浏览器事件的捕捉
在IE下有一个全局的window.event，当事件触发后可以直接使用，但是在fireFox下没有这个东西，当调用触发事件调用一个函数时，如果这个函数没有形参，那么firefox会默认的把event（事件）传进去，但是有参数时就不行啦，所以解决的办法是，自己手动传一个event进去，这样就ok了，具体代码如下：
下面两个函数，都是响应鼠标onclick时触发的动作，第一个在ie下使用正常，但是在firefox下却有问题，改成第二个那样使用，就没有问题了，注意调用方法的区别
IE下：
<html>
<head>
<title>test</title>
<script language="javascript">
function testevent()
{
window.alert(window.event.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent()" id="alink">testevent</a>
</body>
</html>
FireFox下：
<html>
<head>
<title>test1</title>
<script language="javascript">
function testevent(evt)
{
window.alert(evt.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent(event)" id="alink">testevent</a>
</body>
</html>
上面两种写法可能是对IE或者firefox单独适用，所以在修改的时候要加上if…..else判断。
其实event对象在ie以及firefox还有很多不同的特性，比如clienx，pagex等，但是由于在现在流行使用的js框架 prototype中解决了很多这些问题，所以如果是在基于prototype下的开发，这些问题可以考虑得少一些了，只是上面提到的这个捕获问题， prototype中并没有完善的解决，所以单独列出来，下面提及的关于js的也都只列出prototype中未解决的。

2、关于透明度的设置
为了达到给层设置半透明的效果时，在IE和firefox下也有所不同，IE下，style的filter属性有Alpha值可供使用，而firefox下没有Alpha值，所以得指定style的MozOpacity，代码见下：
<STYLE>
filter: Alpha(opacity=10); /*IE*/
-moz-opacity:.1; /*老版本FireFox 1.0 以前*/
opacity:0.1; /*新版本FireFox*/
</STYLE>
view plaincopy to clipboardprint?
<script language="javascript">
//设置一个id为screen的div的透明度为45%，在IE下：
document.getElementById('screen').style.filter='Alpha(Opacity=45)';
//而在firefox下：
document.getElementById('screen').style.MozOpacity='0.45';
</script>
该方法可能也需要先判断一下浏览器。

3、定位层时的有趣问题
在定位层时，我们的做法是给层的style.left 和 style.top设置位置，但是今天发现了一个很有趣的问题，代码如下：
view plaincopy to clipboardprint?
<script language="javascript">
//给一个id为dialog的层定位
document.getElementById('dialog').left = 100;
document.getElementById('dialog').left = 100;
//问题出现了，在ie下，默认将层的左上角定位在（100px,100px）这个点上
//但是在firefox下却死活都不行，后来发现，原来ie在你没有指定单位的时候
//替你加上了单位“px”，而firefox比较“笨”
//他觉得你没有指定单位，就不给你定位，好了，那么标准的写法应该是这样：
document.getElementById('dialog').left = 100px;
document.getElementById('dialog').left = 100px;
//这样firefox也认了
</script>
该方法应该不需要判断浏览器。
4、PNG透明背景的问题
PNG图片在网站设计中是不可或缺的部分，最大的特点应该在于PNG可以无损压缩，而且还可以设置透明，对于增强网站的图片色彩效果有重要的作用。
但为什么PNG图片却没有GIF和JPG图片的使用来得广泛呢，这个祸因应归属于微软的IE浏览器（Firefox和Opera对PNG支持的比较好，而现在浏览器的主流IE6却无法很好的支持）。不过微软在最近也开始改过自新了，新出的的IE7可以很好的支持PNG，可以想象在未来的网络世界， PNG图片的重要性将会更加凸显。
但在大家还在绝大多数的使用IE6的时候，我们又怎样在IE6的世界去完美使用PNG图片呢（PNG图片的时候最重要的地方在于PNG透明背景图片的运用）。我们应该庆幸我们是幸福的！IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG (Portable Network Graphics)格式，则0%-100%的透明度也被提供。但IE5.0无法支持属性，那只有完全绝望了，不过绝望的只是几个，得到是绝大数，我们应该知足，知足才会常乐。
现在我们将通过Hack和AlphaImageLoader滤镜来实现IE6下的PNG透明背景图片。
先熟悉下滤镜的语法：
view plaincopy to clipboardprint?
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src="/blog/sURL" )

属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true :　默认值。滤镜激活。
false :　滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src :　必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器（>），而IE不识别（包括IE7），所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样式。如下
<script language="javascript>
//给一个id为infoBox的层设置一个透明背景，背景图片是down.png，代码如下
//进行了浏览器判断
if (navigator.appName!="Microsoft Internet Explorer")
{
$('infoBox').style.background="0 url(/blog/down.png') no-repeat";
}
else
{
$('infoBox').style.background="0 none no-repeat";
$('infoBox').style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="/blog/down.png'")";
}
</script>
不过需要注意的一个地方：
使用AlphaImageLoader 后该区域的超链接和按钮会失效，解决的方法：
对链接或按钮直接设置相对位置，让它们浮动于滤镜区域的上面。

以下是关于IE和firefox在javascript方面的兼容

1.document.formName.item("itemName") 问题
说明:
IE下,可以使用document.formName.item("itemName")或document.formName.elements ["elementName"];
Firefox下,只能使用document.formName.elements["elementName"].
解决方法:统一使用document.formName.elements["elementName"]. Text1:
document.formName.item("itemName")
document.formName.elements["elementName"]
2.集合类对象问题
说明:
IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.

3.自定义属性问题
说明:
IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
4.eval("idName")问题
说明:
IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.
5.变量名与某HTML对象ID相同的问题
说明:
IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.
6.const问题
说明:
Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.
7.input.type属性问题
说明:
IE下input.type属性为只读;但是Firefox下input.type属性为读写.
8.event.x与event.y问题
说明:
IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
9.event.srcElement问题
说明:
IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
10.window.location.href问题
说明:
IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.
11.模态和非模态窗口问题
说明:
IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
12.frame问题
以下面的frame为例：
<frame src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象.
Firefox:只能使用window.frameName来访问这个frame对象.
另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.
(2)切换frame内容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
如果需要将frame中的参数传回父窗口，可以在frme中使用parent来访问父窗口。例如：parent.document.form1.filename.value="Aqing";
13.body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在.
例如：
Firefox：
<body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
}
</script>
</body>
IE&Firefox：
<body>
</body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
}
</script>
14.cursor问题
IE:cursor:hand ;
Firefox： cursor:pointer;
15. nodeName 和 tagName 问题
问题：
在MF,IE中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。
解决方法：使用 tagName，但应检测其是否为undefined。
16. url encoding
问题：
js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器，一般会服务器报错参数没有找到；当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
一般MF无法识别js中的&
17.children 与 childNodes，removeNode
问题一：在MF中没有 parentElement parement.children   而用 parentNode parentNode.childNodes
问题二：childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。
问题三：一般可以通过node.getElementsByTagName()来回避这个问题。当html中节点缺失时，IE和MF对parentNode的解释不同，例如
    <form>
    <table>
         <input/>
    </table>
    </form>
MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
问题四：MF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)。
问题五：MF中得到属性。需要 node.childNOdes.getAttribute (‘name’);
问题六：innerText IE与 Firefox 不兼容。textContent 都兼容。

18.html对象
现有问题：
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
document.all("itemName")或者document.all("itemId")
解决方法：
使用对象ID作为对象变量名
document.getElementById("itemId")
MF敏感大小写。
备注
document.all是IE自定义的方法，所以请大家尽量不使用。
还有一种方式，在IE和MF都可以使用
var f = document.forms["formName "];
var o = f. itemId;

19.DIV对象
现有问题：
在 IE 中，DIV对象可以使用ID作为对象变量名直接使用。在 MF 中不能。
DivId.style.display = "none"
解决方法：
document.getElementById("DivId").style.display = "none"
备注
获得对象的方法不管是不是DIV对象，都使用getElementById方法。参见18

20 弹出窗体。
IE   showModaldialog
Firefox window.open 和 window.openner 得到父窗口值 window.opnner.get

IE和Firefox下的CSS
　　
1、针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
以下为引用的内容：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */ Www~Chinaz~com
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2、css布局中的居中问题
主要的样式定义如下：
以下为引用的内容：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3、盒模型不同解释
以下为引用的内容：
#box{
   width:600px;
        //for   ie6.0-   w\idth:500px;
       //for ff+ie6.0
}
#box{
   width:600px!important
            //for ff
    width:600px;
        //for ff+ie6.0
    width /**/:500px;
       //for   ie6.0-
}
4、浮动ie产生的双倍距离
Www@Chinaz@com
#box{   float:left;   width:100px;   margin:0 0 0 100px; //这种情况之下IE会产生200px的距离   display:inline;   //使浮动忽略}
这里细说一下block，inline两个元素，Block元素的特点是：总是在新行上开始，高度、宽度、行高，边距都可以控制(块元素)；Inline元素的特点是：和其他元素在同一行上，……不可控制(内嵌元素)；
#box{   display:block; //可以为内嵌元素模拟为块元素   display:inline; //实现同一行排列的的效果   diplay:table;

5、IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{    width: 80px;    height: 35px;}html>body #box{    width: auto;    height: auto;    min-width: 80px;    min-height: 35px;}

6、页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个放到标签下，然后为div指定一个类：
然后CSS这样设计：
以下为引用的内容：
#container{
min-width: 600px;
width:expression(document.body.clientWidth

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。中.国.站.长.站

7、清除浮动
以下为引用的内容：
.hackbox{
       display:table;
//将对象作为块元素级的表格显示
}
或者
.hackbox{
        clear:both;
}
或者加入:after（伪对象），设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的
以下为引用的内容：
......#box:after{
    content: ".";
     display: block;
    height: 0;
     clear: both;
     visibility: hidden;
}
Chinaz@com
8、DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
以下为引用的内容：
#box{
    float:left;
    width:800px;}
#left{
    float:left;
    width:50%;}
#right{
    width:50%;
}
*html #left{
    margin-right:-3px;
   //这句是关键
}
HTML代码

9、属性选择器(这个不能算是兼容，是隐藏css的一个bug)
p[id]{}div[id]{}
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏，FF和OPera作用
属性选择器和子选择器还是有区别的，子选择器的范围从形式来说缩小了，属性选择器的范围比较大，如p[id]中，所有p标签中有id的都是同样式的。

10、IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

11、高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。例：
以下为引用的内容：
     p对象中的内容
CSS：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

12. img对象alt和title的解析
alt：当照片不存在或者load错误时的提示；
title：照片的tip说明。
在IE中如果没有定义title，alt也可以作为img的tip使用，但是在MF中，两者完全按照标准中的定义使用
结论：大家在定义img对象时，最后将alt和title对象都写全，保证在各种浏览器中都能正常使用
13. 其他的细节差别
当你在写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对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。

14. cursor：hand 问题
firefox中不能用 cursor:hand

style="cursor:hand;"
在IE中能正常显示成手；在firefox中却不能正常显示

如果改用 style="cursor:pointer;"
则在两个浏览器下都能正常显示

猜你喜欢