PC端浏览器兼容浅谈

代码兼容:IE7及以上,360,chrome,firefox,opera,搜狗

1. 什么是浏览器兼容问题:

由于不同浏览器的内核不同,同一浏览器的不同版本对CSS的支撑及解析结果不一样,因此渲染的效果也不相同。

2. 需注意的问题

  • 写好标准头: <!DOCTYPE html>
  • 首先引入初始化css,保证消除不同浏览器默认样式
  • PC端H5新标签尽量不用,比如header,footer,nav等
  • 不使用css选择器nth-of-type
  • jquery只有1.x版本兼容ie678,目前官方只做bug维护,不再增加新功能,最终版本是jquery1.12.4

3. 解决方式

1). 让低版本兼容h5标签引入html5shiv.js,让低版本兼容媒体查询引入respond.js

实现方式:

 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="scripts/respond/html5shiv.min.js"></script>
 <script src="scripts/respond/respond.min.js"></script>
 <![endif]-->
2). 让低版本兼容css3的box-sizing标签引入boxsizing.htc

只需在css代码box-sizing标签下边引入文件的当前路径即可

 box-sizing: border-box;
 *behavior: url(/p/7f74e3438a72/scripts/box-sizing-polyfill/boxsizing.htc);
3). 让低版本ie8兼容border-radius标签引入ie-css3.htc

ie-css3.htc下载

-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
behavior: url(/p/7f74e3438a72/scripts/ie-css3.htc/ie-css3.htc);
4). 低版本浏览器点击事件不兼容处理方法,及addEventListener attachEvent解决IE 6 7 8 this指向错误问题

在IE678中,使用attachEvent或detachEvent后事件处事函数里this指向window对象,而addEventListener或removeEventListener中this指向事件对象元素

var oBtn = $(".groupTitle");
/*兼容写法*/
EventListen = {
    addEvent: function(str, fn, ele) {
        if (ele.addEventListener) {
            ele.addEventListener(str, fn);      //火狐GOOGLEIE9+支撑addEventListener
        } else if (ele.attachEvent) {
            ele.attachEvent("on" + str, fn);       //IE678支撑attachEvent
        } else {
            ele["on" + str] = fn;
        }
    }
};
for (var i = 0; i < oBtn.length; i++) {
    EventListen.addEvent("click", funShow, oBtn[i]);
}

function funShow(e) {
    //事件处理函数中this指window,使用事件源代替this关键字
    e = e || window.event;
    var _this = e.srcElement || e.target;
    $(_this).next().slideToggle().parent("li").siblings("li").children("div").hide();
};
5). CSS hack方式

CSS hack简单讲是指各版本浏览器对CSS解析后出现网页内容误差的处理。它通过在CSS样式中加入一些特殊符号,让不同浏览器识别不同符号(不同浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同CSS样式的目的。


从上图可分析出以下几种情况:

  • 大部分特殊字符IE浏览器支撑,其他主流浏览器firefox、chrome、opera、safari不支撑(opera可识别除外)
  • \9:所有IE浏览器都支撑
  • \0:IE8、IE9支撑,opera部分支撑
  • \9\0:IE8部分支撑、IE9支撑
  • \0\9:IE8、IE9支撑
  • *:IE6、IE7支撑
  • _和-:仅IE6支撑
css Hack表现形式
(1).CSS属性前缀法
  • Trident内核:主要代表为IE浏览器,前缀为-ms
  • Gecko内核:主要代表为Firefox,前缀为-moz
  • Presto内核:主要代表为Opera,前缀为-o
  • Webkit内核:产要代表为Chrome和Safari,前缀为-webkit
(2).选择器前缀法

针对一些页面表现不一致或需特殊对待的浏览器,在CSS选择器前加一些只有某些特定浏览器才能识别的前缀进行hack。


(3).IE条件注释法
注:IE10+已不再支撑注释,这类hack不仅对css生效,对写在判断语句里的所有代码都生效                                                                                                                   
各种css Hack情况先容
(1).区别IE和非IE浏览器
.tip{                                                                               
background:blue;     //非IE背景蓝色  因为所有浏览器都能说明
background:red\9;   //IE6789背景紅色,因为\9在IE6789中可识别,覆盖上面样式 IE10跟11应该不识别,IE11测试确定                            
}
(2).区别IE6、7、8、Firefox
.tip{                                                                         
background:blue;       //Firefox背景变蓝色 所有浏览器都支撑
background:red\9;      // IE8背景变红色 IE6、7、8、9支撑覆盖上面样式 
*background:black;      // IE7背景变黑色 IE6、7支撑又一次覆盖上面样式    
_background:orange;  //IE6背景变橘色 IE6支撑又一次覆盖上面样式 
}      

【说明】:IE7可辨识「」和「!important」,但IE6只可辨识「」,至于Firefox可以读取「!important」但不能辨识「*」因此可透过这样的差异来有效区隔IE6、7、Firefox。

(3).区分IE6、7、8、9 (“:root”伪类IE只有IE9支撑,其他主流浏览器均支撑,opera部分支撑**)
element{                                                                                          
color: #999\9\0;            //IE9专用                                                        
color: #999\9;            //IE6 7 8 9共用                                                 
color: #666\0;          //IE8、9共用                                                     
*color: #999;           //IE6、7共用                                                    
*+color: #999;          //IE7专用                                                         
_color: #999;         //IE6专用                                                                     
 }                                                                                                              
:root element{ color: #666\9; }    //IE9

建议:实际开发事先如果不是很清楚可以先写布局代码,写一个阶段用浏览器测试工具(常用工具推荐IETEST)测试各个版本浏览器的布局效果,如有问题针对有问题的浏览器单独调试。

css Hack弊病

一般情况下,尽量避免使用CSS hack,但有些情况为顾及用户体验实现向下兼容,不得已才使用hack。比如由于IE8及以下版本不支撑CSS3,而大家的项目页面使用大量CSS3新属性。在IE9/Firefox/Chrome下正常渲染,这种情况下如果不使用css3pie或htc或条件注释等方法,可能就得让IE8-的专属hack出马了。使用hack虽然对页面表现的一致性有好处,但过多的滥用会造成html文档混乱不堪,增加管理和维护的负担。

常见问题
  1. 背景透明问题

     IE: filter: alpha(opacity=10);                                                      
     FF: -moz-opacity:0.10;                    
     .box{filter:alpha(opacity=50);-moz-opacity:0.5; opacity:0.5;}
    
  2. 图片默认有间距

     问题症状:
     几个img标签放一起时,有些浏览器会有默认间距,加通配符也不起作用。                  
     解决方案:使用float属性为img布局                           
    
  3. IE浮动 margin产生双边距

    .box {                                                                                           
    float:left;                                                                                  
    width:100px;                                                                                 
    margin:0 0 0 100px;          //这种情况之下IE会产生200px距离
    display:inline;      //使浮动忽略                                                            
    }
    
  4. Margin不一致问题:
    当有多张图片需排在一行时,通常使用“Float:Left”来实现,这样一来,浏览器就存在兼容性问题。导致图片与后面的内容存在margin不一致问题。对此解决方法就是给图片添加“Display:inline”项即可。

推荐阅读更多精彩内容

  • 做前端多年,虽然不是经常需要hack,但是大家经常会遇到各浏览器表现不一致的情况。基于此,某些情况大家会极不情愿的...
    大女表哥阅读 630评论 0赞 9
  • 一、如何调试 IE 浏览器 IE7以上版本自带的开发者工具,IE6可以用border的方法;例:IE11的开发者工...
    __Qiao阅读 802评论 2赞 16
  • 1. 如何调试 IE 浏览器? IE7及以上版本有调试台,可以按F12启动:优点:权威;缺点:不方便,正常情况下只...
    进击的阿群阅读 327评论 0赞 3
  • 一、问答部分 1. 如何调试 IE 浏览器 IE7及以上版本有调试台,可以按F12启动。Paste_Image.p...
    _hello__world_阅读 116评论 0赞 1
  • CSS Hack 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展示的页面效果不...
    zx9426阅读 90评论 0赞 0