首页 > 网站 > 网页设计 > 正文

关于遇到的浏览器兼容问题及应对方法(推荐)

2024-08-30 08:35:57
字体:
来源:转载
供稿:网友

前言:

上周天的时候有个学长找我帮忙做三张页面,因为没有数据交换之类的,只是单纯的前端页面,想着好久没做东西, 看书都看烦了,所以就接了也当是练手。之前因为没有系统的看书,所以其实很多问题都考虑的不全面,属于知其然不知其所以然的状态,虽然现在也还有很多要学的东西,但是知道自己的不足总比不知道强吧?而且这也算是一种进步?总之,遇到各种问题,然后我发现问题主要分为两类,一:我自己知识点不够所以不知道怎么解决的,这种问题大多求问度娘或者问大神是可以搞定的;二:属于确实是现阶段技术存在漏洞的,不论是还没能实现的、实现了但存在歧义或冲突的皆在此列。而就我这次做的页面我遇到最大的问题就是浏览器兼容性的问题,有了解决方法的就在此和大家分享,希望能够抛砖引玉,我也能学到更多的知识,谢谢。

正文:

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文件获取屏幕宽度,然后再分别添加对应样式

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

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

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

JavaScript Code复制内容到剪贴板
发表评论 共有0条评论
用户名: 密码:
验证码: 匿名发表