浏览器兼容问题的解决方案
对于前端开发良好的浏览器兼容必不可少，总结一下遇到浏览器兼容问题的解决办法。
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的不兼容问题。
还没有总结比较完整的前端架构，这是以后的学习目标。
四、积累（更新）
以后遇到的不兼容问题和解决方案可以记录在这里。
1、CSS不兼容问题：
2、JavaScript不兼容问题：
2.1、XMLHttpRequest对象
在现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera)中都内建了XMLHttpRequest对象，可以通过 xmlHR = new XMLHttpRequest();创建。
而在IE6 IE5 中则需要使用到ActiveX： xmlHR = new ActiveXObject("Microsoft.XMLHTTP");
解决方案:
1 <script type="text/javascript"> 2 if(window.XMLHttpRequest){ 3 xmlHR = new XMLHttpRequest(); 4 }else{ 5 xmlHR = new ActiveXObject("Microsoft.XMLHTTP"); 6 } 7 xmlHR.open(“GET”,"Url","true/false"); 8 xmlHR.send(); 9 </script>
2.2、addEventListener与attachEvent
addEventListener()在IE9之前的版本不工作，需要使用到attachEvent()
1 <script type="text/javascript"> 2 function addEvent(element,evnt,funct){ 3 if(element.attachEvent) 4 return element.attachEvent(‘on’+event,funct); 5 else 6 return element.addEventListener(evnt,funct,false); 7 } 8 9 //example 10 addEvent(document.getElementById('myElement'),'click',function(){ 11 //do something 12 }) 13 <script>
