Bootstrap 3 兼容 IE8 浏览器,bootstrapie8

Bootstrap 3 兼容 IE8 浏览器,bootstrapie8

公司新上的项目,前端用的Bootstrap3的框架,但它已经放弃对IE9下的支持了。可IE8还是有着许多用户,不能不照顾到他们,IE7以下的,我只想说,现在什么年代了,要解放思想,与时俱进啊,就不能动动手升下级吗。

于是着手解决,在http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html发现了解决方法,亲测可行。在此声名对此作者的感谢。

进入主题。

Bootstrap是一个响应式的布局,你可以在宽屏电脑、普通电脑,平板电脑,手机上都得到非常优秀的布局体验。这种响应式的布局正是通过 CSS3的媒体查询(Media Query)功能实现的,根据不同的分辨率来匹配不同的样式。IE8浏览器并不支持这一优秀的Css3特性,Bootstrap在开发文档中写了如何使用 进行兼容IE8。下面讲解下如何让Bootstrap 3兼容IE8浏览器,至于如何兼容IE6 IE7,请绕道搜索bsie (bootstrap2)。

Bootstrap在IE8中肯定不如Chrome、Firefox、IE11那么完美,部分组件不保证完全兼容,还是要Hack的。这里不谈。还有些细节没有注意到,导致IE8没法 响应式布局。

respond.js(Github下载)

html5shiv : html5.js(Github下载)

 1 //使用html5文档声明
 2 
 3 <!doctype html>
 4 <html lang="zh-CN">
 5 <head>
 6     <meta charset="UTF-8">
 7 
 8 //加入meta标签
 9 
10 //定义媒体查询
11     <meta name="viewport" content="width=device-width, initial-scale=1">
12 
13 //确定显示此网页的IE版本。
14     <meta http-equiv="X-UA-Compatible" content="IE=edge">
15     <meta name="author" content="Jophy" />
16     <title>ie8</title>
17 
18 //引入bootstrap文件这步十分重要,因为下面的respond.js要和Bootstrap文件同域。这里我放在本地,因为之后的部署比较简单。
19 
20     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
21     <link rel="stylesheet" href="bootstrap/css/style.css">
22     <!--[if lte IE 9]>
23 
24 //引入respond.js 和 html5.js
25 
26 //respond.js(Github)是用于媒体查询的,项目说明描述:要和需要进行媒体查询的文件放在同一域中,CDN部署的需要更改一些选项。这里不再谈讨,都改为本地引用加载。
27     <script src="bootstrap/js/respond.min.js"></script>
28 
29 //html5shiv : html5.js(Google Code)(Github)是让不(完全)支持html5的浏览器“支持”html5标签。
30     <script src="bootstrap/js/html5.js"></script>
31     <![endif]-->
32 
33 //添加1.X版本的Jquery库
34 
35 //Jquery 2.0以上就不再支持IE 6/7/8 这三大虐心神器了。所以要想使用Bootstrap3中的一些插件效果,比如modal 弹出层对话框这类控件。我们就需要添加 2.0以下的,这里我用1.10.2的Jquery库。
36     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
37     <script src="bootstrap/js/bootstrap.min.js"></script>
38 </head>
39 <body>
40 </body>
41 </html>

还要注意几点:

1、本地调试需要Web Server(如IIS、Apache,Nginx),单纯地本地打开文件不能看到兼容效果。

2、如果你发现已经引用了respond.js和Bootstrap,仍无效果,请查看你的Bootstrap是否使用了CDN文件,导致两不同域,是的话请都改为本地文件。

3、本文主要针对Bootstrap3版本,如果你是Bootstrap2 ,请搜索 BSIE ,还可以兼容IE6浏览器.

4、Bootstrap3 需要Html5文档声明。

排版如下:

 1 <!doctype html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="author" content="Jophy" />
 8     <title>ie8</title>
 9     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
10     <link rel="stylesheet" href="bootstrap/css/style.css">
11     <!--[if lte IE 9]>
12     <script src="bootstrap/js/respond.min.js"></script>
13     <script src="bootstrap/js/html5.js"></script>
14     <![endif]-->
15     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
16     <script src="bootstrap/js/bootstrap.min.js"></script>
17 </head>
18 <body>
19 </body>
20 </html>

好了,去看看怎么样吧。

http://www.bkjia.com/HTML5/1056077.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1056077.htmlTechArticleBootstrap 3 兼容 IE8 浏览器,bootstrapie8 公司新上的项目,前端用的Bootstrap3的框架,但它已经放弃对IE9下的支持了。可IE8还是有着许多用户,不...

本文源自: 环亚娱乐

上一篇:阻止移动设备(手机、pad)浏览器双击放大网页的方法

下一篇:没有了