pc端兼容性

1.如果图片加a标签在IE9-中会有边框

  解决方案:

• 1 img{border:none;}
• 2.rgba不支持IE8

  * 解决方案:   * 可以用 opacity

   eg:

• opacity:0.7;/FF chrome safari opera/ filter:alpha(opacity:70);/用了ie滤镜,可以兼容ie/

3. display:inline-block ie6/7不支持   ### 解决方案:   * display:inline-block;

• *display:inline;

4.img图片设置display:inline-block的时候。会产生间隙。

• 解决办法。1. 父级设置font-size:0;孩子设置自己相应的字体大小 2.将标签之间的空格删除 3.设置margin：-3px; 16.PIE.htc 可以实现很多css3属性在IE下的兼容性 如:圆角、阴影、渐变

  (1) 圆角 border-radius

复制代码 .signBtn{ height: 40px; background-color:#08BCD2; color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; behavior: url(css/PIE.htc); } 复制代码   (2)阴影 box-shadow

复制代码 .box{   width:200px;   height:200px;   -webkit-box-shadow:1px 0 10px;   -moz-box-shadow:1px 0 10px;   box-shadow: 1px 0 10px;   background-color: #fff;   behavior: url(css/PIE.htc);/IE边框阴影/ } 复制代码

  (3)背景透明rgba

.box{    background-color:rgba(12, 154, 171, 0.29); behavior: url(css/PIE.htc); -pie-background:rgba(12, 154, 171, 0.29); }   (4)渐变

复制代码 .box{ width:200px; height:400px; background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393)); background:-moz-linear-gradient(#9F9, #393); -pie-background:linear-gradient(#9F9, #393); behavior:url(pie.htc);
} 复制代码 注:PIE.htc文件路径相对是相对于css文件,并非html文件,以上例子是将PIE.htc文件放在与css样式文件同一个文件夹css内,而对应的html问价与css文件夹同级

17.JS实现点击跳转到指定位置

复制代码 ("#section").offset(); console.log(scroll_offset); $("body,html").animate({//如果只写body,只被chrome支持 只被chrome支持 Firefox和ie不支持 "scrollTop":scroll_offset.top },0);//此处0写上会一下跳转到指定位置,若不写会有过渡效果 /}); 复制代码

转载于:https://juejin.im/post/5c70a896518825787e69f74e