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

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

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

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

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

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

    

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

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

/*CSS reset*/
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;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption, cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
capation,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before, q:after{content:' '}
abbr,acronym{border:0;}

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

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

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

        1、css内部hack

            eg:

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

        2、网页头部hack

            eg:           

<!--[if IE 6]><code><![end if]-->
<!--[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");

              解决方案:

<script type="text/javascript">
   if(window.XMLHttpRequest){
       xmlHR = new XMLHttpRequest();
   }else{
       xmlHR = new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlHR.open(“GET”,"Url","true/false");
   xmlHR.send();
</script>

           2.2、addEventListener与attachEvent

               addEventListener()在IE9之前的版本不工作，需要使用到attachEvent()

<script type="text/javascript">
    function addEvent(element,evnt,funct){
        if(element.attachEvent)
             return element.attachEvent(‘on’+event,funct);
         else
              return element.addEventListener(evnt,funct,false);
    }

   //example
   addEvent(document.getElementById('myElement'),'click',function(){
    //do something
})
<script>

1、select 下拉框在IE8下 option内容过长时出现截取现象

  css解决方案：

select:focus { auto;position:relative ;}​