根据IE版本加载不同CSS样式的方法小结,解决低版本IE兼容问题

自从中国联盟成员导航采用响应式布局之后,不少朋友反馈该页面在IE8、IE7浏览器会错排,经测试发现确实存在这个问题,但我一直也没去深究解决。这几天博客折腾得很厉害,把多说开除了,而又由于wopus主机发邮件存在问题,死活没搞定之后,把博客搬家到了景安主机,最终才完善了博客原生评论框的所有功能!

今天再次收到微历史博主的留言,趁着这股折腾劲还没冷却,我决定今天抽时间把IE兼容性问题给搞定!

根据IE版本加载不同CSS样式的方法小结,解决低版本IE兼容问题

联盟导航的响应式布局采用的是CSS3 Queries的方法,网上查了下,原来这个方法不兼容IE9以下的IE浏览器,微软啊,你个蛋疼货!!

搜来搜去,网上给出大约有三种简单可行的方法:

一、最简单的方法就是在页面引入css3-mediaqueries.js插件解决兼容性问题;

经测试,发现此方法IE8是可以了,但是IE7还是有点局部问题,定位太麻烦,我也就没深究了!

二、准备多个CSS样式表,通过JS判断IE版本来激活CSS样式表;

拿到网友给的源码,修改了半天才搞定!谁叫我是小白呢!

具体可用的实例代码如下:

原理很简单,使用js判断IE及IE版本,然后根据不同版本来改变当前css样式表的href,由于使用了jQuery ready预加载方法,所以需要在代码之前引入jQery.min.js。

Ps:示例代码只判断了IE7 IE8,可根据实际需要,再加上更多IE版本的判断。经过测试,这种方法有个弊端:页面载入是有一个缓冲时间内是乱排的,然后才会正常!这和JS的载入有关系。。。所以,我放弃了这个方法。

三、通过条件注释判断浏览器版本,从而加载不同的css样式表

代码非常简单:

这个样式将在IE版本小于9的时候激活,解决解决兼容性问题,更多条件判断,只要百度<!--[if lt IE 9]>即可搜到

特别说明:网上很多教程说到这一般就结束了!

其实,实际使用还得注意一个问题:

就拿联盟导航来说,主题sytle.css采用CSS3 Queries方法来实现响应式布局,其实也就部分元素使用这个方法,比如ul li的宽度百分比。

因此,IE低版本会不兼容的根本原因就是:无法识别这个CSS Queries方法,导致部分元素的样式无法生效!!

那么,我们在使用第三种方法来解决兼容性问题的时候,只需要将这些采用CSS3 Queries方法的css样式单独抠出来,使用常规的写法再写一份放到HtForOldIE.css样式表当中,其他样式定义无需更改!

通俗来说,这是一种查漏补缺的方法!通过常规写法补上不能识别的CSS3样式,从而解决了低版本兼容性问题!

最终,我采用了第三种方法,解决了中国博客联盟导航的IE7、8兼容问题:

IE7:

根据IE版本加载不同CSS样式的方法小结,解决低版本IE兼容问题

IE8:

根据IE版本加载不同CSS样式的方法小结,解决低版本IE兼容问题

由于用的是IETester测试,不代表实际使用效果,具体有待实际验证。

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:15   其中:访客  12   博主  3

  1. 香港云主机 2 来自天朝的朋友 谷歌浏览器 Windows 7 山西省太原市 奇虎360科技联通CDN节点

    感觉已经很久没用IE 了 :evil: :evil: :evil: :evil:

  2. 香港虚拟主机 2 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省南京市 奇虎360科技电信CDN节点

    IE兼容性本来就是一个坑,做网站最麻烦的就是调兼容

  3. 圆月博客 5 来自天朝的朋友 谷歌浏览器 Windows 7 广西贵港市 奇虎360科技电信CDN节点

    原来如此 :evil: :evil: :evil: :grin:

  4. 厦门品讯科技微信营销 3 来自天朝的朋友 谷歌浏览器 Windows XP 江苏省常州市 奇虎360科技电信CDN节点

    看下 学习下代码 不过IE很少用了

  5. php程序员 2 来自天朝的朋友 谷歌浏览器 Windows XP 广东省广州市 电信

    IE的不兼容好麻烦的说。

  6. 梦轩丽人 6 来自天朝的朋友 谷歌浏览器 Windows XP 广西贵港市 奇虎360科技电信CDN节点

    博主太能折腾了,不过确实很少用到IE,都是用火狐或360浏览器或谷歌的

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 8.1 广西贵港市 奇虎360科技电信CDN节点

      没办法,还是有不少人用IE7 IE8的,错位了。。

  7. 51人人看电影网 0 来自天朝的朋友 搜狗浏览器 Windows 7 广西贵港市 奇虎360科技电信CDN节点

    如果你浪费了自己的年龄,那是挺可悲的。因为你的青春只能持续一点儿时间——很短的一点儿时间。所以,一件事实是一条没有性别的真理。

  8. 彭亚欧 0 来自天朝的朋友 谷歌浏览器 Windows 8 四川省成都市 奇虎360科技电信CDN节点

    说到IE都是泪啊,太烦了。

  9. 微历史 6 来自天朝的朋友 Safari浏览器  zh-cn 山西省太原市 奇虎360科技联通CDN节点

    厉害,现在我的ie8正常了

  10. Phnomi 4 来自天朝的朋友 未知浏览器 Unknow Os 天津市 联通

    厉害啊博主!

  11. 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

    别人说不兼容我都没搭理,博主反馈我还是很上心的。

  12. 冯耀宗 4 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 天威视讯

    问一下,手机网站是html5做的?

  13. 扬少 1 来自天朝的朋友 未知浏览器 Unknow Os 四川省雅安市 电信

    这是争对IE的吧?我不常用IE的···用的是猎豹··显示的样子总是很别扭~~所有名称都挤在一起的~~这是什么原因?

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      挤在一起的问题,之前在IE7下才有,猎豹我还真没测试过。。建议删除历史垃圾再试试。

加载中,请稍候...