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

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

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

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

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

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

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

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

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

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

<link id="htcss" rel="stylesheet" media="screen" href="style.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function(e){
    if(navigator.userAgent.indexOf("MSIE")>0){
      if(navigator.userAgent.indexOf("MSIE 7.0")>0){  //判断是否是IE7
          document.getElementById("htcss").href="ForIE7.css"; //根据ID改变style的href路径
        }
      if(navigator.userAgent.indexOf("MSIE 8.0")>0){   //判断是否是IE/
          document.getElementById("htcss").href="ForIE8.css";
        }
      if(navigator.userAgent.indexOf("MSIE 9.0")>0 && !window.innerWidth){   //IE8的特殊情况判断
          document.getElementById("htcss").href="ForIE8.css";
        }
};
});
</script>

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

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

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

代码非常简单:

<!--[if lt IE 9]> 
<link rel="stylesheet" media="screen" href="HtForOldIE.css" type="text/css" />
<![endif]-->

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

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

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

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

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

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

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

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

IE7:

IE8:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏狮乐园

codereview-s8

之后再efficiencyView方法中调用stopPropagation方法阻止事件冒泡

893
来自专栏大内老A

ASP.NET:创建Linked ValidationSummary, 深入理解ASP.NET的Validation

我想对于ASP.NET的Validator控件已经熟悉的不能再熟悉了。我们 已经习惯了用Validator控件来验证我们在表单的输入,并通过Validation...

3248
来自专栏向治洪

微信小程序实例之摇一摇抽奖

概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍。微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目...

5476
来自专栏韩东吉的Unity杂货铺

零基础入门 21: UGUI Inputfield

因为一些外部原因,以后文章的发布只会在公众号内推送,取消了在蛮牛专栏的文章更新,望蛮牛小伙伴周知,关注微信公众号,可以第一时间收到新分享的推送通知。

2642
来自专栏静默虚空的博客

Eclipse 使用小结

代码智能提示 Java智能提示 Window -> Preferences -> Java -> Editor -> Content Assist -> Aut...

2316
来自专栏林德熙的博客

win10 uwp 如何创建修改保存位图 创建保存图片在 Image 控件使用WriteableBitmap 转换通过读写像素转换 CanvasBitmap

在 UWP 使用底层的图像渲染就是使用 Softwarebitmap ,这个类提供直接数据修改,可以使用这个类进行软渲染。实际上 Softwarebitmap ...

3491
来自专栏技术小讲堂

ASP.NET AJAX(3)__UpdatePanel

今天也不知道写不写的完了,最近闲下来了,却感冒了,早上起来都不会说话了,不过幸亏咱不是靠嘴皮子过活了,哎~~~~窃喜吧 上一篇简单写到UpdatePanel的一...

3535
来自专栏hightopo

快速开发基于 HTML5 网络拓扑图应用--入门篇(一)

2494
来自专栏CodingBlock

Eclipse的快捷键及常用设置

本篇文章转自:eclipse快捷键及各种设置 1、提示键配置 一般默认情况下,Eclipse ,MyEclipse 的代码提示功能是比Microsoft Vis...

2555
来自专栏移动开发之家

GSYVideoPlayer项目说明

项目目前UI层大部分方法和变量都是protect,虽然就封装性而言这并不是很好,但你可以继承后快捷实现你的自定义。

1013

扫码关注云+社区

领取腾讯云代金券