浏览器兼容性问题及解决方案

1/16浏览器兼容新问题W3C对标准的推进，Firefox，Chrome，Safari，Opera的出现，结束了IE雄霸天下的日子。然而，这对开发者来说，是好事，也是坏事。说它是好事，是因为浏览器厂商为了取得更多的市场份额，会促使各浏览器更符合W3C标准，而得到更好的兼容性，并且，不同浏览器的扩展功能(例如-moz，-webkit开头的样式)，对W3C标准也是个推进；说它是坏事，因为，多个浏览器同时存在，这些浏览器在处理一个相同的页面时，表现有时会有差异。这种差异可能很小，甚至不会被注意到；也可能很大，甚至造成在某个浏览器下无法正常浏览。我们把引起这些差异的问题统称为“浏览器兼容性问题”。而正是这些“浏览器兼容性问题”，无形中给我们的开发增加了不少难度。从浏览器内核的角度来看，浏览器兼容性问题可分为以下三类：1.渲染相关：和样式相关的问题，即体现在布局效果上的问题。2.脚本相关：和脚本相关的问题，包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。3.其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。例如下面的页面，是一个渲染相关的问题：在各个浏览器中都表现的不同，这就属于兼容性问题。造成浏览器兼容性问题的根本原因就是浏览器各浏览器使用了不同的内核，并且它们处理同一件事情的时候思路不同。现今常见的浏览器及其排版引擎（又称渲染引擎）及脚本引擎，如下：2/16而造成浏览器兼容性问题的常见原因则是设计师写出了不规范的代码，不规范的代码会使不兼容现象更加突出。例如：不规则的嵌套：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“不能用于提示了，还有人用这个错误的属性去显示提示么？从开发者角度来讲，多了解标准，了解浏览器兼容性问题，就可以在开发的过程中，有效的避开兼容性问题，让你的页面在所有浏览器中畅通无阻。废话少说，下面就讲讲如何有效的避免一些兼容性问题。JAVASCRIPT.....................................................................................................................................................43/161.HTML对象获取问题..........................................................................................................................52.const问题...........................................................................................................................................53.event.x与event.y问题......................................................................................................................54.window.location.href问题.................................................................................................................55.frame问题..........................................................................................................................................56.模态和非模态窗口问题.....................................................................................................................67.firefox与IE的父元素(parentElement)的区别..................................................................................68.document.formName.item(”itemName”)问题................................................................................69.集合类对象问题.................................................................................................................................610.自定义属性问题.................................................................................................................................711.input.type属性问题...........................................................................................................................712.event.srcElement问题.......................................................................................................................713.body载入问题...................................................................................................................................714.事件委托方法....................................................................................................................................815.Table操作问题...................................................................................................................................816.对象宽高赋值问题.............................................................................................................................8CSS...............................................................................................................................................................81.cursor:handVScursor:pointer......................................................................................................82.innerText在IE中能正常工作，但在FireFox中却不行..................................................................83.CSS透明..............................................................................................................................................94.css中的width和padding.................................................................................................................95.FF和IEBOX模型解释不一致导致相差2px.....................................................................................96.IE5和IE6的BOX解释不一致..........................................................................................................94/167.ul和ol列表缩进问题......................................................................................................................108.元素水平居中问题...........................................................................................................................109.Div的垂直居中问题................................................................................