摘要明天小编跟你们讲解下有关关于遇见的浏览器兼容问题及应对方式(推荐)，相信男子伴们对这个话题应当有所关注吧，小编也搜集到了有关关于遇
明天小编跟你们讲解下有关关于遇见的浏览器兼容问题及应对方式(推荐)，相信男子伴们对这个话题应当有所关注吧，小编也搜集到了有关关于遇见的浏览器兼容问题及应对方式(推荐)的相关资料，希望男子伴们看了有所帮助。
序言：
上周天的时侯有个学长找我帮忙做三张页面由于没有数据交换之类的只是单纯的后端页面想着很久没做东西看书都看烦了所以就接了也当是练手。之前由于没有系统的看书所以虽然好多问题都考虑的不全面属于知其然不知其所以然的状态尽管如今也还有好多要学的东西并且晓得自己的不足总比不晓得强吧并且这也算是一种进步其实遇见各类问题之后我发觉问题主要分为两类一：我自己知识点不够所以不晓得如何解决的这些问题大多求问度娘或则问高手是可以搞定的；二：属于确实是现阶段技术存在漏洞的不论是还没能实现的、实现了但存在歧义或冲突的皆在此列。而就我此次做的页面我遇见最大的问题就是浏览器兼容性的问题有了解决方式的就在此和你们分享希望还能抛砖引玉我也能学到更多的知识感谢。
正文：
1.遇见问题：当前浏览器为ie7及以下版本
解决思路：用一个div覆盖让用户不能看见正常页面呈现的内容
实现方式：将正常是显示内容的div的display属性设置为none将覆盖div的display属性设置为block（PS：在其中可以加入浏览器下载链接让用户早日正常浏览页面）
2.遇见问题：ie8中不能实现圆角由于ie8不能挺好的支持css3
解决思路：下载PIE促使ie8支持css3中的圆角
实现方式：这儿的实现方式就不细说了下载之后“behavior:url(path/PIE.htc);”把路径修改了就能否访问了说一下须要注意的几点问题：
（1）这个引用一定要置于html文件上面并且路径也是相对于引用的html文件而言的置于css文件上面不会有疗效
（2）假如发觉引用成功以后须要圆角的对象消失了不要方去洗个澡下来就好了亲测
开玩笑的我确实去洗了个澡并且并没有出现所以代码出现BUG哪些的求神上香究竟是没用啊（撇嘴）从头调了一遍又去百度了一下发觉问题了是由于z-index的缘故但只设置一个z-index没有疗效哦~原先它的position属性不能是static即默认值ok设置position为relative就ok啦完美的圆角在ie8就实现啦~（在此我诚恳的谢谢写出PIE的工程师们确实是由于大家的努力才让我这么轻松的实现了我想要的疗效康桑阿米达~）
3.遇见问题：仍然是ie8不能支持css3中的@mediascreenand(....)实现响应式布局
解决思路：没办法谁让它是磨人的小妖精呢（耸肩）单独写一个js文件获取屏幕长度之后再分别添加对应款式
实现方式：“”放在html中之后在引入的js文件中实现就ok了。说一个期间遇见的痛楚的事情给你们乐一乐我搞了半天发觉莫名其妙就是不行去网上找了各个高手的代码来一一对照就是不行！如何能不行呢这是多么伤自尊的事情啊。之后发觉竟然是由于在"ie9"和“>”之间多了一个空
（自动再会）。不过调出BUG以后那个成就感还是有的哈就是晓得是由于这个缘由有种“让我想先杀自己100遍好了”的觉得。
js代码贴在下边虽然原理很简单。主要是其中有innerWidth和clientWidth的一些小区别假如有疑惑的话网上有好多高手的详尽解析可以搜来瞧瞧。
JavaScriptCode复制内容到剪贴板/*用于兼容ie8实现不同长度窗口的响应式布局*/functiongetWidthHeight(){varwWidth,wHeight;//获取窗口长度if(window.innerWidth){wWidth=window.innerWidth;}elseif(document.body&&document.body.clientWidth){wWidth=document.body.clientWidth;}//获取窗口高度if(window.innerHeight){wHeight=window.innerHeight;}elseif(document.body&&document.body.clientHeight){wHeight=document.body.clientHeight;}//通过深入Document内部对body进行检查获取窗口大小if(window.documentElement&&window.documentElement.clientWidth&&window.documentElement.clientHeight){wWidth=window.documentElement.clientWidth;wHeight=window.documentElement.clientHeight;}return{"wWidth":wWidth,"wHeight":wHeight};}$(document).ready(function(){varwWidth=getWidthHeight().wWidth;if(wWidth900&&wWidth1200){$("body").css("font-size","10px");}});
4.遇见问题：在ie11之前的版本假如
在标签中则会出现奇怪的红色边框
实现方式：给
加一个“border:0;”绝对立竿见影
5.遇见问题：由于是前台首页所以写了图片滚动ie10以下图片莫名出现多余缝隙
实现方式：给
加一句“display:block;”效果卓越
6.遇见问题：竖向显示的文字用了“writing-mode:tb-rl;”但是在去同学的笔记本下调时发觉竟然在我心爱的FF上没疗效不可能啊之后发觉是由于FF4及以下版本没有实现这个属性这个属性最初是由ie想下来的（老实说我当时有点意外呢虽然ie在我心里是个内向的天才属于自己搞点小发明并且都属于破坏向的所以竟然如此好用的属性是被ie想下来的并且FF竟然要到了后来才实现不得不说对于我是挺意外的）
解决思路：无法有问题就得想办法解决那就只能一句一句的用ulli嵌套之后往右浮动设置定宽来实现了（老实说在用过writing-mode后这个方式很傻但是疗效不好）
实现方式：思路说了那就直接上代码。
XML/HTMLCode复制内容到剪贴板//html部份//这儿的
是为了让标点也就能重起一行XML/HTMLCode复制内容到剪贴板//css部份ul{width:6em;//em是一个相对单位比px更好1em=font-size的大小（假如没有设置font-size则由承继值决定）overflow:hidden;//保证布局不会崩掉list-style:none;//把默认款式消除}ulli{float:right;//实现从右向左布局width:1em;//定宽保证只显示一个字margin-left:0.2em;//保证每位li包含的内容之间有一定的间隔才能认清楚word-break:break-word;//告诉浏览器每位字后手动换行}
以上就是我调兼容性遇见的问题啦以下就是我之前说的那两类问题即我能力有限所以遇见的问题还有就是现存的没有办法解决的问题
一：这个问题归根结底就两字：浮动！（必须任性给它加粗加底线）不论是莫名其妙的这个div就挪到前面去啦；哎你这个img跟随前面的导航的布局跑哪些跑；喂喂这个p标签如何如此不负责任呢和你一起的img都乖乖在下边呆着你挪到前面这个div上面的p标签后面是要搞哪些基友嘛好吧我承认这个锅说究竟还是要自己背由于浮动确实很强悍而且用不好会真的有很奇怪的结果出现。所以啊好好看书吧在这儿骂那些标签或则浏览器觉得它们也挺无辜的。
二：（1）由于要异步加载文件进来所以用到了JQuery的load方式并且在微软浏览器里面是严禁的没有办法调并且换到服务器上就好了同样的还有360也是这样的
（2）微软中不能设置font-size大于12px这是微软的BUG存在挺久的了即使不晓得为什么要始终留着大约认为这样很酷在网上搜到一个解决办法“-webkit-text-adjust:none;”但是我测试没有成功微软直接禁了说是没有这个东西。
后话：
最后有一点我个人的小体会实践确实会学到好多知识并且没有看书这么无趣而且这种知识会很散漫所以看书这样系统的学习仍然是必须的所以以后会努力结合好三者希望能有更多的进步吧。还有还有对于ie的一点小小感受：由于ie很个性浏览器实现上面非常爱特立独行所以我之前非常厌恶ie认为大约是一群仗着自己很6就不把他人放眼里的天才家伙们并且如今发觉ie虽然确实就我个人而言是甩锅小天使它本身对于后端的实现很有看法好多细致的地方做得很棒但是对于后端技术的发展也很有前瞻性所以之前之所以会不住的骂它也是由于自己的无知吧虽然作为天才总是有一些不同于常人的性子能够展现它作为天才这个事实吧。我不会再毫无理由的骂它了不过还是真心希望它还能在未来的某日不要这么摧残我们甜美的后端程序猿了:-)
以上这篇关于遇见的浏览器兼容问题及应对方式(推荐)就是小编分享给你们的全部内容了希望能给你们一个参考也希望你们多多支持爱蒂网。
