关于IE和Firefox中javascript和css的一些区别

来源：互联网发布：手机身份证复印软件编辑：程序博客网时间：2024/06/05 15:53

1、浏览器事件的捕捉

在IE下有一个全局的window.event，当事件触发后可以直接使用，但是在fireFox下没有这个东西，当调用触发事件调用一个函数时，如果这个函数没有形参，那么firefox会默认的把event（事件）传进去，但是有参数时就不行啦，所以解决的办法是，自己手动传一个event进去，这样就ok了，具体代码如下：

下面两个函数，都是响应鼠标onclick时触发的动作，第一个在ie下使用正常，但是在firefox下却有问题，改成第二个那样使用，就没有问题了，注意调用方法的区别

view plaincopy to clipboardprint?
<html>
<head>
<title>test</title>
<script language="javascript">
function testevent()
{
window.alert(window.event.target.id);
return;
}
</script>
</head>
</body>
<a href="#" >testevent</a>
</body>
</html>
<html>
<head>
<title>test</title>
<script language="javascript">
function testevent()
{
window.alert(window.event.target.id);
return;
}
</script>
</head>
</body>
<a href="#" >testevent</a>
</body>
</html>

view plaincopy to clipboardprint?
<html>
<head>
<title>test1</title>
<script language="javascript">
function testevent(evt)
{
window.alert(evt.target.id);
return;
}
</script>
</head>
</body>
<a href="#" >testevent</a>
</body>
</html>
<html>
<head>
<title>test1</title>
<script language="javascript">
function testevent(evt)
{
window.alert(evt.target.id);
return;
}
</script>
</head>
</body>
<a href="#" >testevent</a>
</body>
</html>

其实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>
<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>
<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 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
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图片的样式。如下

view plaincopy to clipboardprint?
<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>
<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 后该区域的超链接和按钮会失效，解决的方法：

对链接或按钮直接设置相对位置，让它们浮动于滤镜区域的上面。

这里有4条经验：

1、在定义页面元素的时候，如果该页面元素不需要被脚本调用，那么它就不需要定义其name和id属性；

2、如果需要定义页面元素的name,id属性，那么避免不同元素的name和id相同；

3、如果没有特殊需要，尽量让name和id相同，这主要是为了通用

4、在脚本中，获得元素时，尽量用document.getElementById("name / id") ，能不使用尽量不使用其他的

下面是收集的一些IE和Firefox的差异：

1. 对象问题
1.1 Form对象
现有问题：
现有代码这获得form对象通过document.forms("formName")，这样使用在IE 能接受，MF 不能。
解决方法：
改用作为下标运算。改为document.forms["formName"]
备注
上述的改用作为下标运算中的formName是id而name

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

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

1.4 关于frame
现有问题
在 IE中可以用window.testFrame取得该frame，mf中不行
解决方法
在frame的使用方面MF和IE的最主要的区别是：
如果在frame标签中书写了以下属性：

那么IE可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
IE： window.top.frameId或者window.top.frameName来访问这个window对象
MF：只能这样window.top.frameName来访问这个window对象
另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容

1.5 窗口
现有问题
IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口，但是MF不支持。
解决办法
直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要传递参数，可以使用frame或者iframe。

2. 总结
2.1 在JS中定义各种对象变量名时，尽量使用id，避免使用name。
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能，所以在平常使用时请尽量使用id，避免只使用name，而不使用id。

2.2 变量名与某 HTML 对象 id 相同的问题
现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。