重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

如何应对web开发中遇到的浏览器兼容问题

如何应对web开发中遇到的浏览器兼容问题,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联公司公司2013年成立,先为赣榆等服务建站,赣榆等地企业,进行企业商务咨询服务。为赣榆企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

正文:

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中的@media screen and (....)实现响应式布局

解决思路:没办法,谁让它是磨人的小妖精呢?(耸肩)单独写一个js文件获取屏幕宽度,然后再分别添加对应样式

实现方法:“”放在html中,然后在引入的js文件中实现就ok了。说一个期间遇到的痛苦的事情给大家乐一乐,我搞了半天,发现莫名其妙就是不行,去网上找了各个大神的代码来,一一对照就是不行!怎么能不行呢,这是多么伤自尊的事情啊。然后发现,居然是因为在"ie9"和“>”之间多了一个空

(手动再见)。不过调出BUG之后那种成就感还是有的哈,就是知道是因为这个原因,有种“让我想先杀自己100遍好了”的感觉。

js代码贴在下面,其实原理很简单。主要是其中有innerWidth和clientWidth的一些小区别,如果有疑问的话网上有很多大神的详细解析可以搜来看看。

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之前的版本,如果标签中,则会出现奇怪的蓝色边框

实现方法:给加一个“border:0;”绝对立竿见影

5.遇到问题:因为是前台首页,所以写了图片滚动,ie10以下图片莫名出现多余空隙

实现方法:给加一句“display:block;”效果卓越

6.遇到问题:竖向显示的文字用了“writing-mode:tb-rl;”但是在去朋友的电脑上调时发现居然在我心爱的FF上没效果,不可能啊???然后发现是因为FF4及以下版本没有实现这个属性,这个属性最初是由ie想出来的(老实说,我当时有点意外呢,毕竟ie在我心中是个孤僻的天才,属于自己搞点小发明但是都属于破坏向的,所以居然这么好用的属性是被ie想出来的,而且FF居然要到了后来才实现,不得不说对于我是挺意外的)

解决思路:没法,有问题就得想办法解决,那就只能一句一句的用ul li嵌套,然后向右浮动,设置定宽来实现了(老实说在用过writing-mode后这个方法很傻而且效果不好)

实现方法:思路说了,那就直接上代码。

XML/HTML Code复制内容到剪贴板

  1. //html部分   

  2. //这里的
    是为了让标点也能够重起一行   

  3.   

XML/HTML Code复制内容到剪贴板

  1. //css部分   

  2. ul{   

  3.     width: 6em;//em是一个相对单位,比px更好,1em = font-size的大小(如果没有设置font-size则由继承值决定)   

  4.     overflow: hidden;//保证布局不会崩掉   

  5.     list-style: none;//把默认样式去除   

  6. }   

  7. ul li{   

  8.     float: right;//实现从右向左布局   

  9.     width: 1em;//定宽保证只显示一个字   

  10.     margin-left: 0.2em;//保证每个li包含的内容之间有一定的间隔,能够看清楚   

  11.     word-break:break-word;//告诉浏览器每个字后自动换行   

  12. }  

以上就是我调兼容性遇到的问题啦,以下就是我之前说的那两类问题,即我能力有限所以遇到的问题,还有就是现存的没有办法解决的问题

一:这个问题归根结底就两字:浮动!(必须任性给它加粗加底线)不论是莫名其妙的这个div就跑到后面去啦;哎,你这个img跟着上面的导航的布局跑什么跑;喂喂,这个p标签怎么这么不负责任呢?和你一起的img都乖乖在下面呆着,你跑到上面这个div里面的p标签旁边是要搞什么,搞基嘛?好吧,我承认这个锅说到底还是要自己背,因为浮动确实很强大,但是用不好会真的有很奇怪的结果出现。所以啊,好好看书吧,在这里骂这些标签或者浏览器感觉它们也挺无辜的。

二:(1)因为要异步加载文件进来,所以用到了JQuery的load方法,但是在谷歌浏览器上面是禁止的,没有办法调但是换到服务器上就好了,同样的还有360也是这样的

(2)谷歌中不能设置font-size小于12px,这是谷歌的BUG存在挺久的了,虽然不知道为何要一直留着,大概觉得这样很酷?在网上搜到一个解决办法“-webkit-text-adjust:none;”但是我测试没  有成功,谷歌直接禁了,说是没有这个东西。

关于如何应对web开发中遇到的浏览器兼容问题问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


网站栏目:如何应对web开发中遇到的浏览器兼容问题
文章地址:http://cqcxhl.com/article/pgdcoj.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP