火狐与IE差别收集及解决方法

作者:周星 发布:2017-10-07

早年总结了一些 firefox 和 IE 的兼容性问题,一直保存在有道云笔记中,现在把它转到博客,其中一些可能早已被官方解决、取缔或不准确,如果您看到,请联系博主

一、IE 与 FireFox 的 js 和 css 

png 透明 AlphaImageLoader 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod =sSize,src=sURL) 

enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true:默认值。滤镜激活。false: 滤镜被禁止。
sizingMethod:可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop:剪切图片以适应对象尺寸。
image:默认值。增大或减小对象的尺寸边界以适应图片 的尺寸。
scale:缩放图片以适应对象的尺寸边界。
src:必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将 不会作用。

firefox 不能对 innerText 支持 
firefox 支持 innerHTML 但却不支持 innerText,它支持 textContent 来实现 innerText,不过默认把多余的空格也保留了。 如果不用 textContent, 如果字符串里面不包含 HTML 代码也可以用 innerHTML 代替。 

禁止选取网页内容 
在 IE 中一般用 js:obj.onselectstart=function(){return false;} 
而 firefox 用 CSS:-moz-user-select:none 

滤镜的支持(例:透明滤镜)  
IE:filter:alpha(opacity=10);
firefox:-moz-opacity:.10; 

捕获事件 
 IE:obj.setCapture() 、obj.releaseCapture()
 Firefox:document.addEventListener(”mousemove”,mousemovefunction,true); document.removeEventListener(”mousemove”,mousemovefunction,true); 

获取鼠标位置 
IE:event.clientX、event.clientY 
firefox:需要事件函数传递事件对象 obj.onmousemove=function(ev){ X= ev.pageX;Y=ev.pageY; } 

DIV 等元素的边界问题 
比如:设置一个 div 的 CSS:{width:100px;height:100px;border:#000000 1px solid;} 
IE 中:div 的宽度(包括边框宽度):100px,div 的高度(包括边框宽度):100px;
而 firefox:div 的宽度(包括边框宽度):102px,div 的高度(包括边框宽度):102px;

判断浏览器类型 
var isIE=document.all ? true : false; 
我写了一个变量,如果支持 document.all 语法那么 isIE=true,否则 isIE=false 

在不同浏览器下的 CSS 处理 
一般可以用!important 来优先使用 css 语句(仅 firefox 支持) 
比如:{border-width:0px!important;border-width:1px;} 在 firefox 下这个元素是没有边框的,在 IE 下边框宽度是 1px 

document.formName.item(”itemName”) 问题 
问题说明:IE 下,可以 使用 document.formName.item(”itemName”) 或 document.formName.elements[”elementName”];
Firefox 下,只能使用 document.formName.elements[”elementName”]。 
解决方法:统一使用 document.formName.elements[”elementName”]。 

集合类对象问题 
问题说明:IE 下,可以使用()或[]获取集合类对象;
Firefox 下,只能使用[]获取集合类对象。 
解决方法:统一使用 [] 获取集合类对象。 

自定义属性问题 
问题说明:IE 下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获 取自定义属性;
Firefox 下,只能使用 getAttribute() 获取自定义属性。
解决方法:统一通过 getAttribute() 获取自定义属性。

eval(”idName”)问题 
问题说明:IE 下,可以使用 eval(”idName”) 或 getElementById(”idName”) 来取得 id 为 idName 的 HTML 对象;
Firefox 下,只能使用 getElementById(”idName”) 来取得 id 为 idName 的 HTML 对象。 
解决方法:统一用 getElementById(”idName”) 来取得 id 为 idName 的 HTML 对象。 

变量名与某 HTML 对象 ID 相同的问题 
问题说明:IE 下,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用,Firefox 下则不 能;
Firefox 下,可以使用与 HTML 对象 ID 相同的变量名,IE 下则不能。 
解决方法:使用 document.getElementById(”idName”) 代替 document.idName。最好不要取 HTML 对象 ID 相同的变量名,以减少错误;在声明变量时,一律加上 var 关键字,以避免歧义。 

const 问题 
问题说明:Firefox 下,可以使用 const 关键字或 var 关键字来定义常量;
IE 下,只能使用 var 关键 字来定义常量。 
解决方法:统一使用 var 关键字来定义常量。 

input.type 属性问题 
问题说明:IE 下 input.type 属性为只读;但是 Firefox 下 input.type 属性为读写。 
解决办法:不修改 input.type 属性。如果必须要修改,可以先隐藏原来的 input,然后在同样的位 置再插入一个新的 input 元素。

window.event 问题 
问题说明:window.event 只能在 IE 下运行,而不能在 Firefox 下运行,这是因为 Firefox 的 event 只能在事件发生的现场使用。 
解决方法:在事件发生的函数上加上 event 参数,在函数体内(假设形参为 evt)使用 var myEvent = evt?evt:(window.event?window.event:null) 
 示例:<input type=”button” onclick=”doSomething(event)”/> 
<script language=”javascript”>
 function doSomething(evt) { 
    var myEvent = evt ? evt: (window.event ? window.event : null) … 

event.x 与 event.y 问题 
问题说明:IE 下,event 对象有 x、y 属性,但是没有 pageX、pageY 属性;Firefox 下,even 对象有 pageX、pageY 属性,但是没有 x、y 属性。
解决方法:var myX = event.x ? event.x : event.pageX;var myY = event.y ? event.y:event.pageY;  

event.srcElement 问题 
问题说明:IE 下,event 对象有 srcElement 属性,但是没有 target 属性;Firefox 下,event 对象有 target 属性,但是没有 srcElement 属性。
解决方法:使用 srcObj = event.srcElement ? event.srcElement : event.target;  

window.location.href 问题 
问题说明:IE 或者 Firefox2.0.x 下,可以使用 window.location 或 window.location.href; 
Firefox1.5.x 下,只能使用 window.location。 
解决方法:使用 window.location 来代替 window.location.href。当然也可以考虑使用 location.replace()方法。 

模态和非模态窗口问题 
问题说明: IE 下,可以通过 showModalDialog 和 showModelessDialog 打开模态和非模态窗口; Firefox 下则不能。 
解决方法:直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。 如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用 window.opener 来访问父窗口。
如果需 要父窗口控制子窗口的话,使用 var subWindow = window.open(pageURL,name,parameters);来获得新开的窗口对象。 

iframe frame 和 iframe 问题 
以下面的 frame 为例: <frame src=”xxx.html” id=”frameId” name=”frameName” /> 
(1)访问 frame 对象 
IE:使用 window.frameId 或者 window.frameName 来访问这个 frame 对象;
Firefox:使用 window.frameName 来访问这个 frame 对象; 
解决方法:统一使用 window.document.getElementById(”frameId”) 来访问这个 frame 对象; 
(2)切换 frame 内容 
在 IE 和 Firefox 中都可以使用 window.document.getElementById(”frameId”).src = “xxx.html” 或 window.frameName.location = “xxx.html”来切换 frame 的内容; 如果需要将 frame 中的参数传回父窗口,可以在 frame 中使用 parent 关键字来访问父窗口。 

body 载入问题 
问题说明:Firefox 的 body 对象在 body 标签没有被浏览器完全读入之前就存在;而 IE 的 body 对象 则必须在 body 标签被浏览器完全读入之后才存在。 
[注] 经验证,IE6、Opera9 以及 FireFox2 中不存在上述问题,单纯的 JS 脚本可以访问在脚本之前已经载入的所有对象和元素,即使这个元素还没有载入完成。 

事件委托方法 
问题说明:IE 下,使用 document.body.onload = inject;其中 function inject()在这之前已被实现;
在 Firefox 下,使用 document.body.onload = inject(); 
解决方法:统一使用 document.body.onload=new Function(”inject()”);或者 document.body.onload = function(){/* 这里是代码 */}
[注意] Function 和 function 的区别 

访问的父元素的区别 
问题说明:在 IE 下,使用 obj.parentElement 或 obj.parentNode 访问 obj 的父结点;
在 firefox 下,使用 obj.parentNode 访问 obj 的父结点。 
解决方法:因为 firefox 与 IE 都支持 DOM,因此统一使用 obj.parentNode 来访问 obj 的父结点。 

cursor:hand VS cursor:pointer 
问题说明:firefox 不支持 hand,但 ie 支持 pointer ,两者都是手形指示。
 解决方法:统一使用 pointer。

innerText 的问题 
问题说明:innerText 在 IE 中能正常工作,但是 innerText 在 FireFox 中却不行。 
解决方法:在非 IE 浏览器中使用 textContent 代替 innerText。 
示例: if(navigator.appName.indexOf(”Explorer”) >-1){ 
    document.getElementById(”element”).innerText = “my text”;
 }else{
     document.getElementById(”element”).textContent = “my text”;
 } 
[注] innerHTML 同时被 ie、firefox 等浏览器支持,其他的,如 outerHTML 等只被 ie 支持,最好不用。

对象宽高赋值问题 
问题说明:FireFox 中类似 obj.style.height = imgObj.height 的语句无效。 
 解决方法:统一使用 obj.style.height = imgObj.height + “px”; 

Table 操作问题 
问题说明: firefox 以及其它浏览器对于 table 标签的操作都各不相同, ie 中不允许对 table ie、 在 和 tr 的 innerHTML 赋值,使用 js 增加一个 tr 时,使用 appendChild 方法也不管用。 
解决方法: //向 table 追加一个空行: var row = otable.insertRow(-1); var cell = document.createElement(”td”); cell.innerHTML = “”; cell.className = “XXXX”; row.appendChild(cell); [注] 由于俺很少使用 JS 直接操作表格,这个问题没有遇见过。建议使用 JS 框架集来操作 table, 如 JQuery。 

ul 和 ol 列表缩进问题 
消除 ul、ol 等列表的缩进时, 经验证,在 IE 中,设置 margin:0px 可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置 padding 对样式没有影响;
在 Firefox 中,设置 margin:0px 仅仅可以去除上下的空白,设置 padding:0px 后仅仅可以去掉左右缩进,还必 须设置 list-style:none 才 能去除列表编号或圆点。也就是说,在 IE 中仅仅设置 margin:0px 即可达到最终效果,而在 Firefox 中必须同时设置 margin:0px、 padding:0px 以及 list-style:none 三项才能达到最终效果。

CSS 透明问题 
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF:opacity:0.6。 
[注] 最好两个都写,并将 opacity 属性放在下面。 

二、IE6/IE7 和 Firefox 对 Div 处理的差异
基本 HTML 代码 
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml >
<head> 
    <title>Div Float Sample</title> 
    <style type=”text/css”> 
        div { margin:3px; } 
        .d1 { width:250px; min-height:20px; border:1px solid #00cc00; } 
        .d2 { width:130px; min-height:40px; border:1px solid #0000cc; } 
        .d3 { width:100px; min-height:40px; border:1px solid #cc0000; } 
    </style> 
</head> 
<body> 
<div class=”d1″> 
    <div class=”d2″> 
    </div> 
    <div class=”d3″> 
    </div> 
</div> 
 </body> 
</html> 
以上代码显示的结果如下,很正常,结果相同


 


下面会在这个基础上进行修改,修改的内容都在 style 中,其他代码就不再重复写了。请注意,这里的 Style 中用到了 min-height,这个和 height 是不同的,min-height 指定了对象的一 个最小高度,当对象的子内容高度超过这个最小高度是,这个对象会自动撑大。这是一个非常牛的 style,可惜的是,在这个 style 和 float 这个同样牛的 style 一起使用 的时候,就会出现各种问题。 

内部两个 Div 都修改成为 float:left 

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; } 
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; } 
 .d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; } 
这和前面第一种加 float:left 的情况相同。 

显示结果如下。


 干脆把外层的 Div 也修改成为 float:left 
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; } 
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; } 
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; } 
以上代码在下面这些 Doctype 下试验过,结果相同。 显示结果如下,

这种情况下,两者都是正常的。 

外层是 float:left,内层最后一个不再 float:left 

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; } 
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; } 
left 的情况相同。所以最好是 padding 和 margin 都不用? 

显示结果如下, 



结论 

再重申一次,本文讨论的是一个比较高级的话题。如果在 style 中用 height 而不是 min-height 来设 定高度,是不会出现以上这些问题的。不过,不用 min-height 就失去了 div 自动撑大这一个很有必 要的特性。 在 min-height 和 float:left 的情况下,没有一种完美的写法让 Firefox 和 IE 结果相同。不过仍然 可以发现绕开的方法。 进一步试验可以发现,margin 遭到的影响在 padding 上比较好,所以最好是 padding 和 margin 都不用,或者只用 padding。 

两者相同的代码如下,
div { padding:3px; } 
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; } 
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; } 
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; } 
left 的情况相同。当对象的子内容高度超过这个最小高度时。 

显示结果如下,


三、CSS 完美兼容 IE6/IE7/FF 的通用方法 
关于 CSS 对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.

一、CSS HACK 以下两种方法几乎能解决现今所有 HACK. 
1, !important
随着 IE7 对!important 的支持, !important 方法现在只针对 IE6 的 HACK.(注意写法.记得该声明位 置需要提前.) 

2, IE6/IE77 对 FireFox *+html 与 *html 是 IE 特有的标签, firefox 暂不支持.而*+html 又为 IE7 特有标签. 注意: *+html 对 IE7 的 HACK 必须保证 HTML 顶部有如下声明: 
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”> 

二、万能 float 闭合 
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 将以下代码加入 Global.CSS 中,给需要闭合的 div 加上class=”clearfix” 即可,屡试不爽. 

三、其他兼容技巧 

1, FF 下给 div 设置 padding 后会导致 width 和 height 增加, 但 IE 不会.(可用!important 解决) 

2, 居中问题. 
1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.) 
2).水平居中. margin: 0 auto;(当然不是万能) 
3) 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签) 
4) FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie 下 margin 加倍等问题. 
5) ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常 见于导航标签和内容列表) 
6)作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应. 
7) 关于手形光标. cursor: pointer. 而 hand 只适用于 IE. 

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 */ 
那么在 firefox 下字体颜色显示为#333,IE6 下字体颜色显示为#666,IE7 下字体颜色显示为#999。 
 
2 浮动 ie 产生的双倍距离 
#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; 

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

支付宝扫码赞助博主


评论(0)