浅谈浏览器兼容性问题-（3）他山之石整理

#浅谈浏览器兼容性问题-（3）他山之石整理##前言我们除了在自己的实际项目中总结遇到的兼容性问题，还要通过网络及其他途径收集，以拓宽自己的视野思路。网络上的方案可以分为两类，一类针对某个点，解决一个常见的BUG；另外一类针对方法，解决特定版本下浏览器的问题##点###举例* margin及padding在各浏览器下不一致的问题，解决方法一般是`*{margin:0;padding:0;}`，在aliceui中是```body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,PRe,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {    margin:0;padding:0;}```这个问题其实很常见，如果是从切片等基础开始做起，并且对位置定位敏感度高的人一般都会发现。当然第一个解决方法其实在很多项目或者框架的CSS首先会包含，所以较容易会忘记。* 手势鼠标cursor及pointer的问题，统一用pointer* DOCTYPE 统一都加上，推荐用HTML5的DocType* document.all等非标准方法，都用w3c统一的getElementById等方法* 事件问题，另外写一个判断的函数，另外参数注意 window.event || e* IE6的fixed 代码较多，[戳我](http://www.cnblogs.com/duanhuajian/archive/2012/09/23/2699119.html)* 其他，很多。[戳我](http://www.douban.com/note/163291324/) [戳我](http://www.cnblogs.com/ilexcai/archive/2011/08/20/2147173.html) [戳我](http://www.baidu.com/link?url=UszW0Uoit0tAWTvxyg-krto7aZ2yiBUfjN5d8j3GuePZCWUzq6o5U4sDvS1wkKjKL0-bzJdprf7oJb-MVO-09K)###点的集合现成的兼容性解决方案，如[alice](http://aliceui.org/)，针对bootstrap的[bsie](http://www.bootcss.com/p/bsie/)等##方法###css hack即针对不同浏览器的识别特点，对CSS属性加上特别的符号以让不同浏览器表现有所区别。代码：```.myDiv{    background: #000;  /* IE9+/Chrome/FF  黑色 */    background: #ff0000/0; /* IE8 红色 */    +background: #00ff00; /* IE7 蓝色 */    _background: #0000ff; /* IE6 绿色 */}```个人意见，其实之前也有提及，html/css应该以w3c标准为基准去设计开发，这种网页在IE9+/chrome/FF下基本一致，一般IE678才需要特别配置。其他的css hack还有很多，不举例了，[戳我](http://www.cnblogs.com/WuQiang/archive/2011/08/23/2150240.html)即可###前缀各浏览器在推出自己特有属性但未被收录到w3c标准时，会用自己的特有前缀去区分，常见前缀如下|前缀|适用浏览器||-------|--------||`-ms-`|微软IE系列||`-moz-`|Mozilla Firefox||`-o-`,`-xv-`|Opera系列||`-webkit-`|webkit内核如Safari、Safari on iOS、Chrome、Android浏览器|更多用法[戳我](http://book.51cto.com/art/201203/323008.htm)###条件注释IE特有的东西，能针对不同的浏览器显示特定的**(X)HTML结构**，针对结构是本方法最大的特点，如果要实现针对不同浏览器显示不同的HTML结构，例如IE6就显示升级提示，用此方法处理最好。支持`gt（大于）`，`lt（小于）`，`gte（大于等于）`，`lte（小于等于）`，`!（非操作）`及精确到小数点后四位的版本号区分。具体使用方法[戳我](http://baike.baidu.com/link?url=e_gfkfZkbcGf4bsbv0deUt896ugUxuBMtGROUlzBUUO-DijglbTdrarYhcCTAuhbUpWdGmPom7lI7ayqicprWq) ，[戳我](http://www.cnblogs.com/dtdxrk/archive/2012/03/06/2381868.html)###User-Agent这个更加多是用于javascript里面判断，其实本人不推荐使用，此处仅为了罗列。###态度嗯，我们有各种的方法去针对浏览器版本写不同的兼容性方案，但我们应该尽可能少用以上技巧，再重申一次吧*html/css应该以w3c标准为基准去设计开发*，确实是浏览器的BUG才用到处理BUG的方法。另外，针对Javascript的区别推荐用[鸭式辨型](http://scriptfans.iteye.com/blog/318821) ([Duck typing](http://en.wikipedia.org/wiki/Duck_typing))的原则去判断。（其实CSS HTML也 有，不过js会更加常见）*会飞，像鸭子一样走路并且嘎嘎叫的，就当作是鸭子了*，此方法不仅能处理各种外壳浏览器，也能适应未来的浏览器。##参考http://www.cnblogs.com/WuQiang/archive/2011/08/23/2150240.htmlhttp://baike.baidu.com/link?url=e_gfkfZkbcGf4bsbv0deUt896ugUxuBMtGROUlzBUUO-DijglbTdrarYhcCTAuhbUpWdGmPom7lI7ayqicprWqhttp://www.cnblogs.com/dtdxrk/archive/2012/03/06/2381868.htmlhttp://en.wikipedia.org/wiki/Duck_typing