浏览器兼容性问题知识整理更新

浏览器兼容性问题整理

李键敏7月12日

HTML,CSSJavascript1、IE中不合理的overflow-x和overflow-y组合overflow和overflow-x/overflow-y的简介overflow是CSS2.1的特性，而overflow-x/overflow-y则是决定了对左、右上下的剪切.overflow-x/overflow-y默认值：

visible

overflow-x/overflow-y的计算值对CSS3规定，'overflow-x'和'overflow-y'的计算值与所设置的值相等，除非这一对值不合理。所以，如果其中一个被设置成了'scroll'、'auto'、'hidden'之一，而另一个是'visible'，那么'visible'会被设置成'auto'。IE中不合理的overflow-x和overflow-y组合IE中，当overflow-x/overflow-y其中之一被设置成'scroll'、'auto'、'hidden'时，另一个还是'visible'，不会被设置为'auto'。IE7(S)/IE8(S)其他浏览器IE6如何避免受此问题影响同时设置overflow-x和overflow-y的值，不要使它出现其中之一为'scroll'、'auto'、'hidden'时，而另一个是'visible'的情况。word-wrap在各浏览器中的差异word-wrap简介当前行超过指定容器的边界时是否断开转行,该属性取值可以为normal/break-wrap，默认为normal一些Bug1，IE6/7andIE8(Q)中word-wrap:break-word作用于TD时，TD内容是多个Img时，将不换行，撑宽了父容器2，IE6/7/8/Firefox中word-wrap:break-word作用于option(选项)的父元素/祖先元素上时将不换行隐藏部分显示。option(选项)的父元素或祖先元素设置了word-wrap:break-word。（option自身设置该属性不会触发该现象）3，BODY元素设置了word-wrap:break-word样式，其中有两个左浮动div元素，第一个div内有一个按钮和若干input[type=hidden]的隐藏域，各input元素之间有空格。IE6(Q)

IE8(S)、Firefox(S)、Chrome(S)、Safari(S)容器内部均为非浮动的行内元素，其行内元素与父元素的结束标签之间包含空白符，其内部的非可视元素之间有空白符；

容器自身或者其祖先元素设置了word-wrap:break-word，并且从设置word-wrap:break-word的祖先元素到其自身中间没有设置过word-wrap:normal。三、如何避免受此问题影响合理使用word-wrap属性，对于select元素不使用word-wrap:break-word避免换行样式变形。各浏览器对text-overflow特性的支持差异1、CSS3的text-overflow特性text-overflow可以作用于块级元素、行内元素和单元格，当其值是ellipsis时是作用是将被剪除的文本用省略号表示。2、各浏览器对'text-overflow:ellipsis'的支持情况IE支持的最好，Webkit浏览器只支持不包含块级元素的元素，Firefox旧版彻底不支持IE8(S)/Firefox12ChromeIE6(S)/IE7(S)Firefox(S)3.6在IE8(S),火狐中有个特殊情况，‘text-overflow:ellipsis’对其块级子元素内的文本没有作用。3、Webkit浏览器中:after伪元素对'text-overflow:ellipsis'的影响在Webkit浏览器中:after如果被设置成一个块级伪元素，'text-overflow:ellipsis'会失效。IE8(S)ChromeIE6(S)/IE7(S)/Firefox(S)如何避免受此问题影响

1.不要在包含块级元素的元素上使用‘text-overflow:ellipsis’。 2.当使用:after伪元素时，确保伪元素不是块级元素。详见/blog/2008/07/firefox-text-overflow-ellipsis/。JavascriptDOM获取焦点1、关于focus网页中进行一系列操作，都需要使某个元素处于“激活”状态，类似于锚点。通常，表单元素、锚点元素都支持focus。。遇到div,p怎么办？2、focus与tabIndex（可设置或返回按钮的tab键控制次序）目前，w3c规定，支持tabIndex的有：A,AREA,BUTTON,INPUT,OBJECT,SELECT,andTEXTAREA.。而实际，所有浏览器中，所有元素都支持tabIndex，并且设置过tabIndex的元素都支持focus。因此，我们想让某一元素支持focus，为其设置tabIndex即可。。javascript中的setAttribute()定义和用法setAttribute()方法创建或改变某个新属性。elementNode.setAttribute(name,value)1、样式问题

关于class和classNameelement.setAttribute("class",vName);

element.setAttribute("className",vName);

//forIE6,7兼容：object.className="content“style和cssText兼容方法object.setAttribute(“style”,“position:absolute;left:10px;”)IE6，7不行object.setAttribute("cssText","position:absolute;left:10px;top:10px;")兼容：使用object.style.cssText="position:absolute;left:10px;top:10px;"2、setAttribute()的差异div.setAttribute(“onclick”,“javascript:alert(‘Thisisatest!’)”);//6,7div.onclick=function(){alert(‘sss’)}IE并不是不支持setAttribute这个函数，而是不支持用setAttribute设置某些属性包括对象属性、集合属性、事件属性;为达到兼容各种浏览器的效果，可以用点符号法来设置Element的对象属性、集合属性和事件属性在IE浏览器与其他浏览器的命名区别列表

propFix={ 'for':'htmlFor', 'class':'className', 'html':'innerHTML', readonly:'readOnly', maxlength:'maxLength', cellspacing:'cellSpacing', rowspan:'rowSpan', colspan:'colSpan', tabindex:'tabIndex', usemap:'useMap', frameborder:'frameBorder' };各浏览器中获取html元素属性的差别1、设置HTML元素属性的方式方式1，直接在html代码中设置元素属性，值只能是字符串。方式2，javascript代码中通过点运算符设置元素属性，值可以是JSON。方式3，javascript代码中通过setAttribute方法设置元素属性，值可以是JSON。2、获取HTML元素属性的方式方式1，javascript代码中通过点运算符获取元素属性。方式2，javascript代码中通过getAttribute方法获取元素属性代码测试：getAttribute.html3、差别IE中无论元素自有属性

，自定义属性都能通过点运算符获取；非IE浏览器只能通过getAttribute获取自定义属性。统一采用标准方法el.getAttribute(name)获取,自带的属性尽量直接用.运算符去获取。除了一些特别的，像hrefxx.getAttribute(“href”,2)//IE6,7自动补全如下：setAttribute.htmlid是div元素自有属性，country是自定义属性。各浏览器中各变量值汇总如下：newDate().getYear()标准参考根据ECMAScript规范附录B.2.4Dtotype.getYear()

中的描述，‘getYear’返回的是当前年份与-1900的差值，该方法已经作废，应使用'getFullYear'来代替。alert(newDate(1979,11,11).getYear());alert(newDate(2012,5,20).getYear());IE79

2012FirefoxChromeSafariOpera79

112解决方案请不要使用Dtotype.getYear()方法，使用Dtotype.getFullYear()代替。另外，要给一个Date对象设置年份，也请不要使用Dtotype.setYear()方法，使用Dtotype.setFullYear()代替。Window.Event简介：event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。问题说明：window.eventIE里的是全局变量，随时可用，firefox里的要用参数引导才能用，是运行时的临时变量。if(typeof(window.event)=='undefined'){alert('window.eventisundefined')//FF}else{alert('window.eventisdefined')//IE7/8/9}functiontest(event){ vare=(window.event?window.event:null)||event; console.log(e)}

<buttonid="btn3"onclick="test()">clicke!</button>标准方式下不能在事件处理方法中取得事件对象。onclick="test()"直接执行了，没任何参数传递给test函数第一：<buttonid=“btn3”onclick=“test(event)”>clicke!</button>这里的event不是形参，而是实参，必须名为event。//onclick="alert(arguments.callee)"第二：window.event||

arguments.callee.caller.arguments[0];onclick=‘test()’event.srcElement与event.target简介：event.srcElement：

event.srcElement可以捕获当前事件作用的对象。target返回触发此事件的元素（事件的目标节点）。问题说明：IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.functionmyFun(){console.log(arguments.callee.caller.toString())varets=window.event||arguments.callee.caller.arguments[0];varet=ets.srcElement||ets.target;}

event.x与event.y问题说明：IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性兼容：mXX=e.x?e.x:e.pageX;Event.Keycode,event.whichfunctionkeyUp(e){ varcurrKey=0,e=e||event; currKey=e.keyCode||e.which||e.charCode;

//这句是为了兼容浏览器按键事件对象的按键码属性如IE中，只有keyCode属性，而FireFox中有which和charCode属性，Opera中有keyCode和which属性等 varkeyName=String.fromCharCode(currKey); alert("按键码:"+currKey+"字符:"+keyName);}document.onkeyup=keyUp;‘hasOwnProperty’,

‘valueOf’,

‘isPrototypeOf’,‘toLocaleString’,

‘toString’,

‘constructor’for

...

In不出来问题说明：IE中存在一个bug,某个实例属性与标记为[[DontEnum]]的某个属性同名，那么该实例属性不会出现在forin。vararr={"first":1,"second":2,"third":3,toString:function(){},valueOf:function(){},constructor:11,hasOwnProperty:function(){},isPrototypeOf:function(){}/*propertyIsEnumerable:function(obj){}*/};vartxt=document.getElementById("txt");varstr="";for(varoinarr){str+=o+"'s[[DontEnum]]is"+pertyIsEnumerable(o)+"<br/>";}txt.innerHTML=str;结果如下，IE9，firefox,chrome,safari,opera都显示如下：

而IE8,6,7显示如下：

WhyisgetElementsByTagName()fasterthatquerySelectorAll()?/blog/2010/09/28/why-is-getelementsbytagname-faster-that-queryselectorall/简单总结下：前者返回动态NodeList，后者返回静态NodeList。动态NodeList是以注册的方法返回的一个cache的引用（每次调用返回同一个cache），而静态NodeList则需要重新获得Node信息，相当于一个创建一个实例（每次调用返回的结果不同），所以动态NodeList返回的快。querySelectorAll的用处在于两点：提供CSS选择器一样的查询DOM的功能、返回的是静态NodeList故不随DOM树的变化而变化（不会陷入死循环）。NodeList是DOM操作（getElementsByTagName等）取出来的集合，是集合而不是普通的数组，但是他们有数组的一些属性，例如length、下标索引，但是他们也有自己的属性。

NodeList最大的特点就是时效性NodeList转化为数组functioncollectionToArray(collection){varary=[];for(vari=0,len=collection.length;i<len;i++){ ary.push(collection[i]);}returnary;}END谢谢【JS】JavaScript不支持重载，在JavaScript中，脚本在执行时不会顾及函数定义时的参数，而是直接使用在作用域链中最后定义的那个函数。这意味着，相同名称的函数永远