前端开发适配性难题总结(PC端)

日期：2021-03-18 类型：科技新闻我要分享

关键词：秀米制作h5，h5如何制作，h5小游戏制作，h5游戏开发，免费的h5制作网站

1.假如照片加a标识在IE9-中会有边框

处理计划方案:

img{border:none;}

2.rgba不适用IE8

处理计划方案:能够用 opacity

eg:

opacity:0.7;/*FF chrome safari opera*/ 
filter:alpha(opacity:70);/*用了ie滤镜,能够适配ie*/

可是,必须留意的是,opacity会危害里边元素的全透明度

3. display:inline-block ie6/7不适用

处理计划方案:

display:inline-block;
*display:inline;

4.默认设置的body沒有body去掉margin状况下ie5、6、7边沿会很宽margin-top加倍假如处在无申明情况那末全部的ie访问器margin-top加倍

处理计划方案:用css给body加上magin特性为0px

body{margin:0;}

5.IE 6.0 Firefox Opera等是真正宽度=width+padding+border

IE5.X 真正宽度=width

处理计划方案:

方式1.

div.content { 
　　width:400px;  //这个是不正确的width(针对ie5来讲是正确的），全部访问器都读到了 
　　voice-family: "\"}\"";  //IE5.X/win忽视了"\"}\""后的內容 
　　voice-family:inherit; 
　　width:300px;  //包含IE6/win在内的一部分访问器读到这句，新的标值(300px)遮盖掉了旧的 
}

方式2.

div.content { 
　　width:300px !important;  //这个是正确的width，绝大多数适用!important标识的访问器应用这里的标值 
　　width(空格)/**/:400px;  //IE6/win不分析这句，因此IE6/win依然觉得width的值是300px；而IE5.X/win读到这句，新的标值(400px)遮盖掉了旧的，由于!important标识对她们不起功效 
}

6.height不可以小于16px,设定较小高宽比标识（1般小于10px），在IE6，IE7，畅游中高宽比超过自身设定高宽比

处理计划方案:overflow设定为hidden

7.min-height兼容问题 ie6 7解释为超出高宽比就撑开，而别的版本号访问器则遮住下面的层

处理计划方案:min-height:200px; height:auto !important; height:200px; overflow:visible;

8.position:fixed IE5、6没法鉴别此特性

处理计划方案:

<!--[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);
　　　　　　}
　　　　　　/*下面3组标准用于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]-->

9.波动的div有margin_left特性ie6会加倍不管适配主视图還是无申明主视图

处理计划方案:

　计划方案1: IE6唯1鉴别特性_的方法加_display特性_display:inline;

　计划方案2:

　　　　标准注解<!--[if lte IE 6]>
　　　　<style>
　　　　　　.on{ display:inline }
　　　　</style>
　　　　<![endif]-->

10.cursor适配自定指针cur文件格式的照片url相对路径难题不管是适配還是无申明版本号

处理计划方案:cursor:url(Hand.cur), url(/Hand.cur), auto;

11.png照片 IE6里边的png照片不可以全透明适配版本号和无申明版本号全是

处理计划方案:

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

12.img波动 img标识打回车会导致每一个照片之间有间隙

处理计划方案:能够删掉之间的回车键还可以让这些照片波动

13.在IE访问器下 input type="text"文字框点一下时后边会出現"X",和type="password"后边会出現双眼,怎样去除这两种默认设置款式:

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

注:IE9-不鉴别

14.CSS3前缀 -webkit- webkit3D渲染模块 chrome/safari

　　　　　　 -moz- gecko3D渲染模块 firefox

　　　　　　 -ms- trident3D渲染模块 IE

　　　　　　 -o- 　opeck3D渲染模块　opera　　　　

动漫、过渡、background-size 都必须加前缀

eg: 动漫

 @-webkit-keyframes name{
　　　　0%{动漫刚开始的css款式;}
　　　　100%{动漫完毕的css款式;}
　}
-webkit-animation:name 8s infinite linear;

过渡:

div.box{
　　　　bottom:⑷0px;<br>　　  　-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⑸, Chrome 1⑼*/
    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款式文档同1个文档夹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写上会1下自动跳转到特定部位,若不写会有过渡实际效果
   /});

以上便是本文的所有內容，期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助，另外也期待多多适用脚本制作之家！

上一篇：今年元旦节放假了返回下一篇：没有了