#浅谈浏览器兼容性问题-（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 ; /* 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.html
http://baike.baidu.com/link?url=e_gfkfZkbcGf4bsbv0deUt896ugUxuBMtGROUlzBUUO-DijglbTdrarYhcCTAuhbUpWdGmPom7lI7ayqicprWq
http://www.cnblogs.com/dtdxrk/archive/2012/03/06/2381868.html
http://en.wikipedia.org/wiki/Duck_typing