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

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

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

    

 

你可能感兴趣的:(浏览器兼容)