web开发-浏览器兼容策略-js+css

本篇文章只是站在前人肩膀上的总结梳理。

1  js和浏览器兼容的现状

     首先谈一下浏览器，虽然现在ie依然是浏览器市场的老大，大约占有67%的份额，但是由于其很多方面的欠缺，用户开始选择其他浏览器作为自己浏览网页的主要工具，比如firefox、theworld、maxthon、chrome、opera等等，在用户使用比较多的浏览器中，分为2大派系 - ie内核和非ie内核，像theworld、maxthon、greenbrower等等都属于ie内核，而firefox、chrome、opera则为非ie内核，众多的浏览器使我们的web程序就出现了兼容问题，像ie就有ie6、ie7、ie8之分，同样的样式控制和js脚本，在不同的ie版本中也会出现不同的效果，甚至bug，何况在非ie内核的firefox、 chrome、opera了。

    从市场份额分析，目前ie依然是浏览器市场老大，并会在很长一段时间内很难改变，不过我们不能忽略firefox以及其他浏览器的快速成长，未来我们没有办法估计。所以我们必须做到多浏览器的兼容。现在市场上大多web开发着选择兼容ie7(8)和firefox作为主要兼容对象，这两款也是目前用户使用最多的。

2  js针对两款浏览器的兼容解决方案

      1.集合类对象问题
           IE：可以使用()或[]获取集合类对象；
           Firefox：只能使用[]获取集合类对象；
           解决方法：统一使用[]获取集合类对象；

      2.HTML对象获取问题

          IE：document.idname或者document.getElementById("idName")；
          FireFox：document.getElementById("idName")；
          解决办法：统一使用document.getElementById("idName")；

      3.const问题

         IE：只能使用var关键字来定义常量；        

         Firefox：可以使用const关键字或var关键字来定义常量；

         解决方法:统一使用var关键字来定义常量；

      4.window.event问题

        window.event只能在IE下运行,而不能在Firefox下运行；

        解决方法：

         IE&Firefox:
            Submitted(event)"/>  

            <script   language="javascript">
                    function   Submitted(evt)   {
                         evt=evt?evt:(window.event?window.event:null);
                        }

           </script>

      5.event.x与event.y问题

              IE：event对象有x,y属性,但是没有pageX,pageY属性；

              Firefox：,even对象有pageX,pageY属性,但是没有x,y属性；

              解决方法：使用mX(mX   =   event.x   ?  event.x  :  event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX；

      6.event.srcElement问题

              IE：event对象有srcElement属性,但是没有target属性；

              Firefox：event对象有target属性,但是没有srcElement属性；

              解决方法： 使用obj(obj  = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target。

              请同时注意event的兼容性问题。

     7.window.location.href问题

             IE或者Firefox2.0.x下,可以使用window.location或window.location.href；
             Firefox1.5.x下,只能使用window.location；

             解决方法：使用window.location来代替window.location.href；

   8. 模态和非模态窗口问题

             IE：可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；

             Firefox：不存在这两个窗口。
             解决方法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。
                            如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口。

    9.frame问题

             以下面的frame为例：
                        <frame  src="xxx.html" id="frameId" name="frameName"  />
                                  (1)访问frame对象：
                                          IE：使用window.frameId或者window.frameName来访问这个frame对象，frameId和frameName可以同名。
                                          Firefox：只能使用window.frameName来访问这个frame对象。
                                          另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象。

                                  (2)切换frame内容：

                                             在IE和Firefox中都可以使window.document.getElementById("testFrame").src =  

                                            "xxx.html"或window.frameName.location =   "xxx.html"来切换frame的内容.如果需要将frame中的参数传回父窗口(注意不是opener,而是

                                             parent frame)，可以在frame中使用parent来访问父窗口。例如：parent.document.form1.filename.value="Aqing"；

    10.body问题

                            IE的body则必须在body标签被浏览器完全读入之后才存在；

                            Firefox的body在body标签没有被浏览器完全读入之前就存在；

    11. 事件委托方法

                           IE：document.body.onload   =   inject;   //Function   inject()在这之前已被实现；
                           Firefox：document.body.onload   =   inject()；

   12.  cursor:hand  和 cursor:pointer

                           IE支持pointer；
                           Firefox不支持hand；                          

                           解决方法:   统一使用pointer。

   13.  innerText的局限

                        innerText在IE中能正常工作，但是innerText在FireFox中却不行.   需用textContent。
                            解决方法：
                         if(navigator.appName.indexOf("Explorer")   >   -1){
        document.getElementById('element').innerText   =   "my   text";
                         }   else{
        document.getElementById('element').textContent   =   "my   text";
                         }

3 css针对两款浏览器的兼容解决方案

       1.   PX单位的默认和不默认

                       FireFox中设置HTML标签的style时，所有位置性和字体尺寸的值必须后跟px。这个IE没有强求。

                                解决方法：

                                  设置HTML标签的style时，所有位置性和字体尺寸的值必须后跟px。

       2.   Padding 问题

                      IE：padding   5px   4px   3px   1px ； 

                      FireFox：无法解释简写；

                      解决方法：

                      最好一律写成   padding-top:5px;   padding-right:4px;   padding-bottom:3px;   padding-left:1px的形式。

      3.  CSS透明

                     IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)； 
                     FireFox：opacity:0.6；

      4.  CSS圆角的支持

                    IE：不支持圆角。

                    FireFox：支持

       5.  CSS样式符号识别

                 根据不同浏览器对CSS样式的支持程度，解析结果和识别CSS的优先级不同，设计师们就可以根据这些不同浏览器 的特点来书写不同的CSS样式代码。IE6能识别下 划线_和星号*，IE7能识别星号*，不能识别下划线_，而firefox两个都不能识别，如此，就可 以针对IE6.IE7和FF通过对这些特殊符号的使用写不同的代码了。

                     <style>
                               div{
                                          background:green; /* for FireFox */
                                          *background:red; /* for IE7 */
                                          _background:blue; /* for IE6 */
                                    }
                     </style>

              该样式显示的效果是：在FireFox中背景色为green；在IE7中背景色为red；在IE6中背景色为blue。

      6.  常用的居中，背景色设置不一致

                 IE和FireFox的不同浏览器对待 div 的垂直居中问题，链接加边框和背景色，BOX模型解释不一致。

     以上更详细的兼容问题 请参看   http://apps.hi.baidu.com/share/detail/9121838 

4  Js本身提供的判断浏览器的方法

           JavaScript是前端开发的主要语言，我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法，一种是根据各种浏览器独有的属性来分辨，另一种是通过分析浏览器的userAgent属性来判断的。在许多情况下，值判断出浏览器类型之后，还需判断浏览器版本才能处理兼容性问题，而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道。

             1.IE

         只有IE支持创建ActiveX控件，因此她有一个其他浏览器没有的东西，就是ActiveXObject函数。只要判断window对象存在ActiveXObject函数，就可以明确判断出当前

         浏览器是IE。

           2. Firefox

         Firefox中的DOM元素都有一个getBoxObjectFor函数，用来获取该DOM元素的位置和大小（IE对应的中是getBoundingClientRect函数）。这是Firefox独有的，

         判断它即可知道是当前浏览器是Firefox。

          3. Opera

           Opera提供了专门的浏览器标志，就是window.opera属性。

5   JavaScript判断浏览器类型及版本

              以下一段经典判断浏览器和版本的javascript
         <script type="text/javascript">
                           var Sys = {};
                           var ua = navigator.userAgent.toLowerCase();
                           if (window.ActiveXObject)
                                        Sys.ie = ua.match(/msie ([\d.]+)/)[1];
                          else if (document.getBoxObjectFor)
                                       Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1];
                          else if (window.MessageEvent && !document.getBoxObjectFor)
                                       Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1];
                          else if (window.opera)
                          Sys.opera = ua.match(/opera.([\d.]+)/)[1];
                          else if (window.openDatabase)
                          Sys.safari = ua.match(/version\/([\d.]+)/)[1];
       
                    //以下进行输出
                          if(Sys.ie) document.write('IE: '+Sys.ie);
                          if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
                          if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
                          if(Sys.opera) document.write('Opera: '+Sys.opera);
                          if(Sys.safari) document.write('Safari: '+Sys.safari);
    </script>

以上更详细的代码说明 请参看 http://www.cnblogs.com/leadzen/archive/2008/09/06/1285764.html