浏览器兼容问题的解决方案

对于前端开发良好的浏览器兼容必不可少，总结一下遇到浏览器兼容问题的解决办法。

1、保证浏览器默认css样式一致；

2、书写规范的css，然后在不同的浏览器下测试，针对不同的bug，用适当的方式解决。如：css Hack,

3、使用好的前端架构，通过第三方控件兼容浏览器；

4、多学习、多积累、多google。

 一、保证浏览器默认css样式一致

首先要保证各个浏览器的默认样式的统一，所以这里就用到了css.reset。网络上有各种版本的reset代码，一般都是在一个项目的base.css里。我在这里举出一个我看到比较好的一个版本；

 1 /*CSS reset*/
 2 body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote£¬th,td{margin:0;padding:0;}
 3 table{border-collapse:collapse;border-spacing:0;}
 4 fieldset,img {border:0;}
 5 address,caption, cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
 6 ol,ul {list-style:none;}
 7 capation,th{text-align:left;}
 8 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
 9 q:before, q:after{content:‘ ‘}
10 abbr,acronym{border:0;}

二、测试，针对不同的BUG找到合适的解决方案

     将制作的网页在不同的浏览器上测试，遇到问题后查看原因，比较常用的是css Hack。但是网上的建议是不要使用Hack，而是尽量用兼容的属性去替换。

CSS Hack:根据不同的浏览器写不同的css代码。大致包括三类有效形式

1、css内部hack

eg:

_  定义IE6   * 定义IE7   \0(后)定义IE8 定义顺序应该是由识别多的到识别少的。保证最后定义的属性是只有那个浏览器能识别的。如，_是只能IE6识别的。

2、网页头部hack

eg:

1 <!--[if IE 6]><code><![end if]-->
2 <!--[if gt IE 6 && lt IE 9]> <code> <![end if]-->

3、选择器hack

IE6能识别*html .class{}，IE 7能识别*+html .class{}或者*:first-child+html .class{}

三、使用好的前端架构

常用到的jquery+bootstrap比较全面的解决了js 和 css的不兼容问题。

还没有总结比较完整的前端架构，这是以后的学习目标。

四、积累（更新）

以后遇到的不兼容问题和解决方案可以记录在这里。

浏览器兼容问题的解决方案