前端 PC端兼容性问题总结

　　解决方案:

img{border:none;}

2.rgba不支持IE8

　　解决方案:可以用 opacity

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

　但是,需要注意的是,opacity会影响里面元素的透明度

　　解决方案:

display:inline-block; *display:inline;

　　解决方案:用css给body添加magin属性为0px

body{margin:0;}

　　解决方案:

div.content {  　　width:400px;  //这个是错误的width(对于ie5来说是正确的），所有浏览器都读到了  　　voice-family: "\"}\"";  //IE5.X/win忽略了"\"}\""后的内容  　　voice-family:inherit;  　　width:300px;  //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的  }

div.content {  　　width:300px !important;  //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值  　　width(空格)/**/:400px;  //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用  }

6.height不能小于16px,设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

　　解决方案:overflow设置为hidden

　　解决方案:min-height:200px; height:auto !important; height:200px; overflow:visible;

　　解决方案:

<!--[if lte IE 6]> 　　　<style type="text/css"> 　　　　　 html { 　　　　　　　　/*这个可以让IE6下滚动时无抖动*/ 　　　　　　　　background: url(about:black) no-repeat fixed 　　　　　　} 　　　　　　#demo_t, #demo_b, #demo_l, #demo_r { 　　　　　　　　position: absolute; 　　　　　　} 　　　　　　#demo_t, #demo_b { 　　　　　　　　/*这个解决body有padding时，IE6下100%不能铺满的问题*/ 　　　　　　　　width: expression(offsetParent.clientWidth); 　　　　　　}  　　　　　　/*下面三组规则用于IE6下top计算*/ 　　　　　　#demo_l, #demo_r { 　　　　　　　　top: expression(offsetParent.scrollTop   300); 　　　　　　} 　　　　　　#demo_t { 　　　　　　　　top: expression(offsetParent.scrollTop); 　　　　　　} 　　　　　　#demo_b { 　　　　　　　　top: expression(offsetParent.scrollTop   offsetParent.clientHeight-offsetHeight); 　　　　　　} 　　</style>
<![endif]-->

　　解决方案:

　　　　方案一: IE6唯一识别属性_的方式加_display属性_display:inline;

　　　　方案二:

条件注释

　　解决方案:cursor:url(Hand.cur), url(/Hand.cur), auto;

　　解决方案:

<!--[if IE ]> 　　　<style type="text/css"> 　　　　　#DIVname{ 　　　　　　　　background:none; 　　　　　　　　filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="pngtouming.png" 　　　　　}  　　　</style> <![endif]-->

　　解决方案:可以删除之间的回车键也可以让这些图片浮动

13.在IE浏览器下 input type="text"文本框点击时后面会出现"X",以及type="password"后面会出现眼睛,如何除去这两种默认样式:

::-ms-clear,::-ms-reveal{display:none;}

　　注:IE9-不识别

　　动画、过渡、background-size 都需要加前缀

 @-webkit-keyframes name{ 　　　　0%{动画开始的css样式;} 　　　　100%{动画结束的css样式;} 　} -webkit-animation:name 8s infinite linear;

　过渡:

 div.box{ 　　　　bottom:-40px;
　　  　-webkit-transition:all .3s ease-in-out 0s; }

注:但是过渡不兼容IE8-,可以用JS动画实现

background-size 同样也不支持IE8,可以考虑用img

15.渐变

　　解决方案:

filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#35FEA1,endColorStr=#6E9DFF); /*IE 6 7 8*/     background: -ms-linear-gradient(top, #35FEA1,  #6E9DFF);/* IE 10 */     background:-moz-linear-gradient(top, #35FEA1,  #6E9DFF); /*火狐*/     background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/*谷歌*/     background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/* Safari 4-5, Chrome 1-9*/     background: -webkit-linear-gradient(top, #35FEA1,  #6E9DFF);/*Safari5.1 Chrome 10 */     background: -o-linear-gradient(top, #35FEA1,  #6E9DFF);/*Opera 11.10 */

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实现点击跳转到指定位置

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

来源：51CTO

作者：几微

链接：https://blog.csdn.net/zzz19/article/details/100856047

标签

background

scrolltop

css

解决方案