【上海校区】 专攻小班JS前端培训
当前位置:  主页 > 前端动态 >

前端培训中要学的PC兼容最好的方法

2019-04-23/10:04:46

PC兼容

浏览器兼容.jpg

PC兼容主要 还是 在IE浏览器上的一个兼容,这在前端培训班中是要学习的,也是企业要用的内容,还有css3样式的一个兼容

正常来说 IE浏览器兼容性是最差的,另外就是css3 样式在其他主流浏览器

的一个兼容

 

Hack处理

什么是Hack处理?hack处理是 针对不同的浏览器 来写不同的样式

来达到兼容各个浏览器,简单的说hack处理就是 写兼容的一个流程

由于不同的浏览器 不同版本的浏览器,对html标签、css样式

支持是不一样的,这样导致我们html css 在有些浏览器上可能不支持

造成 布局错乱,所以我们会针对这些不支持的浏览器 来写特定的 标签

或样式来让浏览器支持,这个过程就叫做hack处理

 

针对css3样式 比如:css3hack处理 ,在css3样式 前面加上前缀 来让不同版本的

浏览器支持css3样式

-webkit-animation:myA 1s ;/*  -webkit- 兼容 谷歌,苹果,QQ*/
-moz-animation:myA 1s ;/* -moz- 兼容 火狐*/
-ms-animation:myA 1s ;/*-ms- 兼容 IE*/
-o-animation:myA 1s ;/* -o- 兼容 欧朋*/
animation:myA 1s ;/* 大部分已经支持的浏览器用的 */

 

针对IE 比如1:针对低版本的IE写不同的样式 使用条件注释

1.针对不同的IE浏览器 来写不同的样式 使用条件注释
--1.比如  如果是IE浏览 就执行下面style标签中的样式
<!--[if IE]>
    <style>
        body{background: saddlebrown}
    </style>
<![endif]-->
--2.比如 针对某个IE浏览器版本 来写特定的style样式
<!--[if IE 8]>
    <style>
        body{background: saddlebrown}
    </style>
<![endif]-->
--2.比如 针对IE8以下的浏览器 来写特定的内容
lt表示小于的意思,lte表示小于等于,gt表示大于,gte表示大于等于)
<!--[if lt IE 8]>
   <span style="font-size: 50px;color:red;">你要远离IE678浏览器</span>
   <img src="bd.jpg">
<![endif]-->

 

 

针对IE比如2:在样式上 加上特定的符号 让 样式在不同IE的版本上生效

/*在某个样式上面 加上特定 符号 来支持不同IE版本浏览器*/
/*在某个样式上面 加上特定 符号 来支持不同IE版本浏览器*/
.box{
    width:200px;height:200px;
    background:pink;
    /*1.在IE8背景颜色显示为绿色*/
    background:green\0;/*\0 这个符号IE8-9 识别*/
    /*2.在IE7背景颜色显示为蓝色*/
    +background:blue;/*+这个符号IE6-7识别*/
    /*3.在IE6背景显颜色示为红色*/
    _background:red;/*_这个符号E6识别*/
}

 

 

 

常见的bug处理

1. IE6中 标签有浮动的情况下 margin可能出现双倍边距的情况

解决方法:

<style>
    body{margin:0;}
    .box{
        width:200px;height:200px;
        background:pink;
        /*在IE6下 加了浮动以后 会出现双倍的margin值 50px会变成100px*/
        margin-left:50px;
        /*为了解决50px变成100px的问题 我们可以设置一个针对IE6的magin值*/
        _margin-left:25px/* 另外一个方法是display:inline*/
        float: left;
    }
</style>
<div class="box"></div>

2. IE6-7中 块标签 转成display:inline-block以后 还是独占一整行

(如果直接有浮动的话就可以避免这个bug)

解决方法:

<style>
   body{margin:0;}
   div{
       width: 100px; height: 100px;
       background: pink;
       display: inline-block;
       /*加入下面2个代码 就能解决独占一整行的问题*/
       _display: inline;
       zoom:1;
   }
</style>
<div>文字</div>123

 

3. IE6-8不支持透明度

解决方案:

<style>
   body{margin:0;}
   div{
       width: 100px; height: 100px;
       background:red;
       opacity: 0.5;
       /*IE透明度写法*/
       filter:alpha(opacity=50)
   }
</style>
<div>文字</div>

 

4. IE6-9中 图片上如果 套了链接 图片就会出现边框

解决方法:img{border:0;}

<style>
    img{border:0;}
</style>
<a href="">
    <img src="bd_logo1.png">
</a>

5. IE6-7中 子标签如果设置了定位,父标签设置了overflow

:hidden 是无法隐藏 溢出的子标签

解决方法:给父标签加个定位

<style>
    .box{
       width: 100px; height: 100px;
        border:1px solid red;
        overflow: hidden;/*在IE6-9中无法隐藏 带有定位的子标签*/
        /*解决方法:给父标签加上相对定位*/
        position: relative;
    }
    .box2{
       width: 200px;
       height: 50px;
       border:1px solid blue;
       position: relative;
    }
</style>
<div class="box">
       <div class="box2"></div>
</div>

 

6. IE678 不支持css3选择器,css3转换 ,阴影,圆角,渐变色

解决方法:使用css Pie.htc(IE浏览器补丁文件) + selectivizr.js 插件+jquery

整体下载网址:http://gucong3000.github.io/selectivizr/

 

1. 下载:

 图片1.png

2.解压下载的文件 放入项目

 

图片2.png 

 

 

 

IE测试工具

IETest http://www.ietester.cn/

 


+相关文章推荐+