FF与IE（连载1）

最近接了个项目，打算在做之前巩固下知识，下面归纳下FF与IE的一些差异，个人喜欢FF些（PS：早上得知费德勒惜败，心情郁闷中，感觉小费要选择退役了）

首先来点大家都知道的：

1.FF的事件添加方法：addEventListener/removeEventListener   vs  IE的attachEvent/detachEvent

addEventListener方法 用于 Mozilla系列

举例:

document.getElementById( " btn " ).onclick  =  method1;
document.getElementById( " btn " ).onclick  =  method2;
document.getElementById( " btn " ).onclick  =  method3;

如果这样写,那么将会只有medhot3被执行

写成这样：

var  btn1Obj  =  document.getElementById( " btn1 " ); 
// object.attachEvent(event,function);
btn1Obj.attachEvent( " onclick " ,method1);
btn1Obj.attachEvent( " onclick " ,method2);
btn1Obj.attachEvent( " onclick " ,method3);

执行顺序为method3->method2->method1

如果是Mozilla系列，并不支持该方法，需要用到addEventListener

var  btn1Obj  =  document.getElementById( " btn1 " );
// element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener( " click " ,method1, false );
btn1Obj.addEventListener( " click " ,method2, false );
btn1Obj.addEventListener( " click " ,method3, false );

执行顺序为method1->method2->method3

2.FF 不支持outerHTML ，innerText 和outerText，这三个属性原本是IE4+的私有属性，其实个人觉得用处也不太大，innerHTML转innertext的方法有很多，比如用正则咔掉HTML标签，textContent也可搞定innerText。另外，在jQuery中，jQuery有html（）方法,在jQuery core中，原文为：

　　　　return elem.nodeType === 1 ?
　　　　elem.innerHTML.replace( rinlinejQuery, "" ) //rinlinejQuery = / jQuery\d+="(?:null|\d+)"/g,
　　　　undefined;

我的理解为，若没有参数的html（），则return 元素节点或者元素的innerHTML，replace掉（jQuery数字=“数字|null”），为什么这样呢？你来思考吧

jquery还有text（）方法，调用jQuery.access（）方法，看得我云里雾里的，主要是  

　　　　exec = fn;
　　　　fn = function( elem, key, value ) {
　　　　　　return exec.call( jQuery( elem ), value );
　　　　};

 用call的方法，把

function( value ) {
            return value === undefined ?
                jQuery.text( this ) :
                this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );
        }

这个方法拓展给jQuery，然后呢？没有然后了，然后我也不知道了~

3 parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持。

4..input.type属性问题 
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.

5.坑 事件委托方法 
IE：document.body.onload = inject; //Function inject()在这之前已被实现 
Firefox：document.body.onload = inject();

6.cursor:hand VS cursor:pointer 
firefox不支持hand，但ie支持pointer 
解决方法: 统一使用pointer

7. FireFox中设置HTML标签的style时，所有位置性和字体尺寸的值必须后跟px。这个ie也是支持的。恩，style要加px；

8. XMLHTTP的区别
//mf 
if (window.XMLHttpRequest) //mf 
{ 
xmlhttp=new XMLHttpRequest() 
xmlhttp. 
xmlhttp.open("GET",url,true) 
xmlhttp.send(null) 
} 
//ie
else if (window.ActiveXObject) // code for IE
{ 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") 
    if (xmlhttp) 
    { 
    xmlhttp. 
    xmlhttp.open("GET",url,true) 
    xmlhttp.send() 
    } 
} 
}

9.事件源，

ff target ，iE srcElement

10.事件

FF event ，IE  window.event 

11.获取标签自定义熟悉，

FF div1.getAttribute("xxx")     IE diva.value或者div1["XXX"]

 

CSS.

1.为什么FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,
那我又想固定高度,又想能被撑开需要怎样设置呢？
办法就是去掉height设置min-height:200px;   
这里为了照顾不认识min-height的IE6
可以这样定义: { height:auto!important; height:200px; min-height:200px; }

2.,条件注释
<!--其他浏览器 –>    
<link rel="stylesheet" type="text/css" href="css.css" />    
<!--[if IE 7]> <!-- 适合于IE7 –>    
<link rel="stylesheet" type="text/css" href="ie7.css" />    
<![endif]—>    
<!--[if lte IE 6]>    
<!-- 适合于IE6及一下 –>    
<link rel="stylesheet" type="text/css" href="ie.css" />    
<![endif]—> 

转载于:https://www.cnblogs.com/bolobolomy/archive/2012/11/13/2767801.html