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

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

    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;}

View Code

 

二、测试，针对不同的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>

View Code

 

           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>

View Code

 

 

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

  css解决方案：

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