css在各个浏览器兼容性问题及解决方案

浏览器兼容新问题W3C对标准的推进，Firefox，Chrome，Safari，Opera的出现，结束了IE雄霸天下的日子。然而，这对开发者来说，是好事，也是坏事。说它是好事，是因为浏览器厂商为了取得更多的市场份额，会促使各浏览器更符合W3C标准，而得到更好的兼容性，并且，不同浏览器的扩展功能(例如-moz，-webkit开头的样式)，对W3C标准也是个推进；说它是坏事，因为，多个浏览器同时存在，这些浏览器在处理一个相同的页面时，表现有时会有差异。这种差异可能很小，甚至不会被注意到；也可能很大，甚至造成在某个浏览器下无法正常浏览。我们把引起这些差异的问题统称为“浏览器兼容性问题”。而正是这些“浏览器兼容性问题”，无形中给我们的开发增加了不少难度。从浏览器内核的角度来看，浏览器兼容性问题可分为以下三类：1.渲染相关：和样式相关的问题，即体现在布局效果上的问题。2.脚本相关：和脚本相关的问题，包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。3.其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。例如下面的页面，是一个渲染相关的问题：在各个浏览器中都表现的不同，这就属于兼容性问题。造成浏览器兼容性问题的根本原因就是浏览器各浏览器使用了不同的内核，并且它们处理同一件事情的时候思路不同。现今常见的浏览器及其排版引擎（又称渲染引擎）及脚本引擎，如下：而造成浏览器兼容性问题的常见原因则是设计师写出了不规范的代码，不规范的代码会使不兼容现象更加突出。例如：不规则的嵌套：HTMLcodedivli新闻标题一/lili新闻标题一/lili新闻标题一/li/divDIV中直接嵌套LI元素是不合标准的，LI应该处于UL内。此类问题常见的还有P中嵌套DIV，TABLE等元素。不规范的DOM接口和属性设置：JScriptcodedocument.all.a_name.style.top=35;上面代码中top的值，其实应该是一个字符串值，需有单位。例如：35px。总之，人为的原因也占很大一部分。而人为造成兼容性问题的原因，除了粗心之外，大都源于浏览器bug的存在，和开发者对标准的不了解。比如，如果要做一个功能，功能是想让鼠标悬停在IMG元素上方时，可以出现提示信息，经常针对IE做开发的人，可能会使用IMG元素的“alt”属性，但其他浏览器中就是不给‘alt’属性面子。因为W3C标准中规定要去做这件事的属性是”title“，大多浏览器符合标准，IE不符合，这是IE浏览器内核的问题；开发者不知道”title“才是正解，不遵循标准去写代码，是开发者的问题。所以，一个问题分两半，浏览器和开发者都有责任。既然都有责任，就都有义务去解决兼容性问题。那么，从浏览器的角度来讲，它的厂商应该修复浏览器的bug和不合标准的地方，当某一天IE的”alt“不能用于提示了，还有人用这个错误的属性去显示提示么？从开发者角度来讲，多了解标准，了解浏览器兼容性问题，就可以在开发的过程中，有效的避开兼容性问题，让你的页面在所有浏览器中畅通无阻。废话少说，下面就讲讲如何有效的避免一些兼容性问题。?JAVASCRIPT21.HTML对象获取问题22.const问题23.event.x与event.y问题24.window.location.href问题25.frame问题36.模态和非模态窗口问题37.firefox与IE的父元素(parentElement)的区别38.document.formName.item(”itemName”)问题39.集合类对象问题310.自定义属性问题311.input.type属性问题312.event.srcElement问题413.body载入问题414.事件委托方法415.Table操作问题416.对象宽高赋值问题4?CSS41.cursor:handVScursor:pointer42.innerText在IE中能正常工作，但在FireFox中却不行.43.CSS透明54.css中的width和padding55.FF和IEBOX模型解释不一致导致相差2px56.IE5和IE6的BOX解释不一致57.ul和ol列表缩进问题58.元素水平居中问题59.Div的垂直居中问题510.margin加倍的问题611.IE与宽度和高度的问题612.页面的最小宽度613.DIV浮动IE文本产生3象素的bug614.IE捉迷藏的问题615.float的div闭合;清除浮动;自适应高度716.高度不适应817.IE6下图片下有空隙产生818.对齐文本与文本输入框819.LI中内容超过长度后以省略号显示820.为什么web标准中IE无法设置滚动条颜色了921.为什么无法定义1px左右高度的容器922.链接(a标签)的边框与背景923.超链接访问过后hover样式就不出现的问题924.FORM标签925.属性选择器(这个不能算是兼容,是隐藏css的一个bug)1026.为什么FF下文本无法撑开容器的高度10?JAVASCRIPT1.HTML对象获取问题FireFox：document.getElementById(idName);ie:document.idname或者document.getElementById(idName).解决办法：统一使用document.getElementById(idName);2.const问题说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.解决方法：统一使用var关键字来定义常量.3.event.x与event.y问题说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.解决方法：使用mX(mX=event.x?event.x:event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.4.window.location.href问题说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.解决方法：使用window.location来代替window.location.href.5.frame问题以下面的frame为例：framesrc=xxx.htmlid=frameIdname=frameName/(1)访问frame对象:IE:使用window.frameId或者window.frameName来访问这个frame对象.frameId和frameName可以同名。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中的参数传回父窗口(注意不是opener,而是parentframe)，可以在frame中使用parent来访问父窗口。例如：parent.document.form1.filename.value=Aqing;6.模态和非模态窗口问题说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.解决方法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.例如：varparWin=window.opener;parWin.document.getElementById(Aqing).value=Aqing;7.firefox与IE的父元素(parentElement)的区别IE：obj.parentElementfirefox：obj.parentNode解决方法:因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.8.document.formName.item(”itemName”)问题问题说明：IE下，可以使用document.formName.item(”itemName”)或document.formName.elements[elementName]；Firefox下，只能使用document.formName.elements[elementName]。解决方法：统一使用document.formName.elements[elementName]。9.集合类对象问题问题说明：IE下，可以使用()或[]获取集合类对象；Firefox下，只能使用[]获取集合类对象。解决方法：统一使用[]获取集合类对象。10.自定义属性问题问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法：统一通过getAttribute()获取自定义属性。11.input.type属性问题问题说明：IE下input.type属性为只读；但是Firefox下input.type属性为读写。解决办法：不修改input.type属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。12.event.srcElement问题问题说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。解决方法：使用srcObj=event.srcElement?event.srcElement:event.target;如果考虑第8条问题，就改用myEvent代替event即可。13.body载入问题问题说明：Firefox的body对象在body标签没有被浏览器完全读入之前就存在；而IE的body对象则必须在body标签被浏览器完全读入之后才存在。[注]这个问题尚未实际验证，待验证后再来修改。[注]经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。14.事件委托方法问题说明：IE下，使用document.body.onload=inject;其中functioninject()在这之前已被实现；在Firefox下，使用document.body.onload=inject();解决方法：统一使用document.body.onload=newFunction(’inject()’);或者document.body.onload=function(){/*这里是代码*/}[注意]Function和function的区别。15.Table操作问题问题说明：ie、firefox以及其它浏览器对于table标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。解决方法：//向table追加一个空行：varrow=otable.insertRow(-1);varcell=document.createElement(td);ce