有关遇到的访问器适配难题及解决方式(强烈推荐

2021-03-20 12:52 jianzhan

序言:

上星期天的情况下有个学长找我帮忙做3张网页页面,由于沒有数据信息互换之类的,只是单纯性的前端开发网页页面,想着好长时间没做物品, 看书都看烦了,因此就接了也当是练手。以前由于沒有系统软件的看书,因此实际上许多难题都考虑到的不全面,属于知其然不知道其因此然的情况,尽管如今也也有许多要学的物品,可是了解自身的不够总比不知道道强吧?并且这也算是1种发展?总而言之,遇到各种各样难题,随后我发现难题关键分成两类,1:我自身专业知识点不足因此不知道道如何处理的,这类难题大多数求问度娘或问高手是能够搞定的;2:属于的确是目前技术性存在系统漏洞的,无论是还没能完成的、完成了但存在歧义或矛盾的皆在此列。而就我这次做的网页页面我遇到最大的难题便是访问器适配性的难题,有掌握决方式的就在此和大伙儿共享,期待可以毛遂自荐,我也能学到更多的专业知识,感谢。

文章正文:

1.遇到难题:当今访问器为ie7及下列版本号

处理思路:用1个div遮盖,让客户不可以看到一切正常网页页面展现的內容

完成方式:将一切正常是显示信息內容的div的display特性设定为none,将遮盖div的display特性设定为block(PS:在这其中能够添加访问器免费下载连接,让客户尽快一切正常访问网页页面)

2.遇到难题:ie8中不可以完成圆角,由于ie8不可以很好的适用css3

处理思路:免费下载PIE使得ie8适用css3中的圆角

完成方式:这里的完成方式就不细说了,免费下载随后“behavior: url(path/PIE.htc);”把相对路径变更了就可以够浏览了,说1下必须留意的几点难题:

(1)这个引入1定要放在html文档里边,并且相对路径也是相对引入的html文档而言的,放在css文档里边不容易合理果

(2)假如发现引入取得成功以后,必须圆角的目标消退了,不必方,去洗个澡出来就行了,亲测

玩笑的,我的确去洗了个澡可是并沒有出現,因此编码出現BUG甚么的,烧香拜佛究竟是没用啊(摊手),从头开始调了1遍,又去百度搜索了1下,发现难题了,是由于z-index的原因,但只  设定1个z-index沒有实际效果,哦~原先它的position特性不可以是static即默认设置值,ok,设定position为relative就ok啦,完善的圆角在ie8就完成啦~(在此我真心实意的谢谢写出PIE的工程项目师  们的确是由于你们的勤奋才让我这般轻轻松松的完成了我要想的实际效果,康桑阿米达~)

3.遇到难题:仍然是ie8,不可以适用css3中的@media screen and (....)完成回应式合理布局

处理思路:没法,谁让它是磨人的小妖精呢?(耸肩)独立写1个js文档获得显示屏宽度,随后再各自加上对应款式

完成方式:“<!--[if lt ie9]><script type='text/javascript' src='path'></script> <![endif]-->”放在html中,随后在引进的js文档中完成就ok了。说1个期内遇到的痛楚的事儿给大伙儿乐1乐,我搞了半天,发现无缘无故便是不好,去在网上找了各个高手的编码来,11对比便是不好!如何能不好呢,这是多么的伤自尊的事儿啊。随后发现,竟然是由于在"ie9"和“>”之间多了1个空

(手动式再见了)。但是调出BUG以后那种造就感還是有的哈,便是了解是由于这个缘故,有种“让我想先杀自身100遍好了”的觉得。

js编码贴在下面,实际上基本原理很简易。关键是在其中有innerWidth和clientWidth的1些住宅小区别,假如有疑惑的话在网上有许多高手的详尽分析能够搜看来看。

JavaScript Code拷贝內容到剪贴板
  1. /*用于适配ie8完成不一样宽度对话框的回应式合理布局*/  
  2. function getWidthHeight(){   
  3.     var wWidth,wHeight;   
  4.     //获得对话框宽度   
  5.     if(window.innerWidth){   
  6.         wWidth = window.innerWidth;   
  7.   
  8.     }else if(document.body && document.body.clientWidth){   
  9.         wWidth = document.body.clientWidth;   
  10.     }   
  11.     //获得对话框高宽比   
  12.     if(window.innerHeight){   
  13.         wHeight = window.innerHeight;   
  14.     }else if(document.body && document.body.clientHeight){   
  15.         wHeight = document.body.clientHeight;   
  16.     }   
  17.     //根据深层次Document內部对body开展检验,获得对话框尺寸   
  18.     if(window.documentElement && window.documentElement.clientWidth && window.documentElement.clientHeight){   
  19.         wWidth = window.documentElement.clientWidth;   
  20.         wHeight = window.documentElement.clientHeight;   
  21.     }   
  22.   
  23.     return {"wWidth":wWidth,"wHeight":wHeight};   
  24. }   
  25.   
  26. $(document).ready(function(){   
  27.     var wWidth = getWidthHeight().wWidth;   
  28.     if(wWidth <= 900){   
  29.         $("body").css("font-size","5px");   
  30.     }else if(wWidth > 900 && wWidth < 1200){   
  31.         $("body").css("font-size","8px");   
  32.     }else if(wWidth > 1200){   
  33.         $("body").css("font-size","10px");   
  34.     }   
  35. });  

4.遇到难题:在ie11以前的版本号,假如<img>在<a>标识中,则会出現怪异的蓝色边框

完成方式:给<img>加1个“border:0;”肯定立即见效

5.遇到难题:由于是前台接待主页,因此写了照片翻转,ie10下列照片莫名出現过剩间隙

完成方式:给<img>加1句“display:block;”实际效果非凡

6.遇到难题:竖向显示信息的文本用了“writing-mode:tb-rl;”可是在去盆友的电脑上上调时发现竟然在我深爱的FF上没实际效果,不能能啊???随后发现是由于FF4及下列版本号沒有完成这个特性,这个特性最开始是由ie想出来的(老实巴交说,我那时候有点出现意外呢,终究ie在我心中是个孤僻的奇才,属于自身搞点小创造发明可是都属于破坏向的,因此竟然这么功能强大的特性是被ie想出来的,并且FF竟然要到了后来才完成,迫不得已说针对我是挺出现意外的)

处理思路:无法,有难题就得想方法处理,那就只能1句1句的用ul li嵌套循环,随后向右波动,设定定宽来完成了(老实巴交说在用过writing-mode后这个方式很傻并且实际效果不太好)

完成方式:思路说了,那就立即上编码。

XML/HTML Code拷贝內容到剪贴板
  1. //html一部分   
  2. //这里的<br>是以便让标点也可以重起1行   
  3. <ul>  
  4.         <li>天气真好<br>,天气真好<br></li>  
  5.         <li>天气真好<br></li>  
  6.         <li>天气真好<br>,天气真好<br></li>  
  7.         <li>天气真好<br>?天气真好<br></li>  
  8.         <li>天气真好<br></li>  
  9. </ul>  
XML/HTML Code拷贝內容到剪贴板
  1. //css一部分   
  2. ul{   
  3.     width: 6em;//em是1个相对性企业,比px更好,1em = font-size的尺寸(假如沒有设定font-size则由承继值决策)   
  4.     overflow: hidden;//确保合理布局不容易崩掉   
  5.     list-style: none;//把默认设置款式除去   
  6. }   
  7. ul li{   
  8.     float: right;//完成从右向左合理布局   
  9.     width: 1em;//定宽确保只显示信息1个字   
  10.     margin-left: 0.2em;//确保每一个li包括的內容之间有1定的间距,可以看清晰   
  11.     word-break:break-word;//告知访问器每一个字后全自动换行   
  12. }  

以上便是我调适配性遇到的难题啦,下列便是我以前说的那两类难题,即我工作能力比较有限因此遇到的难题,也有便是现存的沒有方法处理的难题

1:这个难题说到底就两字:波动!(务必骄纵给它加粗加底线)无论是无缘无故的这个div就跑到后边去啦;哎,你这个img跟随上面的导航栏的合理布局跑甚么跑;喂喂,这个p标识如何这么不承担责任呢?和你1起的img都乖乖在下面呆着,你跑到上面这个div里边的p标识周围是要搞甚么,搞基嘛?好吧,我认可这个锅归根结底還是要自身背,由于波动的确很强劲,可是用不太好会真的有很怪异的結果出現。因此啊,好漂亮书吧,在这里骂这些标识或访问器觉得它们也挺无辜的。

2:(1)由于要多线程载入文档进来,因此用到了JQuery的load方式,可是在谷歌访问器上面是严禁的,沒有方法调可是换到服务器上就行了,一样的也有360也是这样的

(2)谷歌中不可以设定font-size小于12px,这是谷歌的BUG存在挺久的了,尽管不知道道为什么要1直留着,大约感觉这样很酷?在网络上搜到1个处理方法“-webkit-text-adjust:none;”可是我检测没  有取得成功,谷歌立即禁了,说是沒有这个物品。

后话:

最终,有1点我本人的小体会,实践活动的确会学到许多专业知识,并且沒有看书那末枯燥乏味,可是这些专业知识会很涣散,因此看书这样系统软件的学习培训仍然是务必的,因此以后会勤奋融合好二者,期待能有更多的发展吧。也有也有针对ie的1点小小的感悟:由于ie很个性化,访问器完成里边非常爱特立独行,因此我以前非常反感ie,感觉大约是1群仗着自身很6就不把他人放眼中的奇才家伙们,可是如今发现ie实际上的确就我本人而言是背锅小天使,它自身针对前端开发的完成很有念头,许多细腻的地区做得很棒,并且针对前端开发技术性的发展趋势也很有前瞻性,因此以前之因此会不住的骂它也是由于自身的无知吧,终究做为奇才一直有1些不一样于平常人的性子才可以彰显它做为奇才这个客观事实吧。我不容易再没什么理由的骂它了,但是還是真心实意期待它可以在将来的某天,不必这般折磨大家讨人喜欢的前端开发程序流程猿了:-)

以上这篇有关遇到的访问器适配难题及解决方式(强烈推荐)便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。