公司新上的项目，前端用的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下载)

 //使用html5文档声明

 <!doctype html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

 //加入meta标签

 //定义媒体查询

     <meta name="viewport" content="width=device-width, initial-scale=1">

 //确定显示此网页的IE版本。

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="author" content="Jophy" />

     <title>ie8</title>

 //引入bootstrap文件这步十分重要，因为下面的respond.js要和Bootstrap文件同域。这里我放在本地，因为之后的部署比较简单。

     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

     <link rel="stylesheet" href="bootstrap/css/style.css">

     <!--[if lte IE ]>

 //引入respond.js 和 html5.js

 //respond.js（Github）是用于媒体查询的，项目说明描述：要和需要进行媒体查询的文件放在同一域中，CDN部署的需要更改一些选项。这里不再谈讨，都改为本地引用加载。

     <script src="bootstrap/js/respond.min.js"></script>

 //html5shiv : html5.js（Google Code）(Github)是让不（完全）支持html5的浏览器“支持”html5标签。

     <script src="bootstrap/js/html5.js"></script>

     <![endif]-->

 //添加1.X版本的Jquery库

 //Jquery 2.0以上就不再支持IE 6/7/8 这三大虐心神器了。所以要想使用Bootstrap3中的一些插件效果，比如modal 弹出层对话框这类控件。我们就需要添加 2.0以下的，这里我用1.10.2的Jquery库。

     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>

     <script src="bootstrap/js/bootstrap.min.js"></script>

 </head>

 <body>

 </body>

 </html>

还要注意几点：

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

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

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

4、Bootstrap3 需要Html5文档声明。

排版如下：

 <!doctype html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="author" content="Jophy" />

     <title>ie8</title>

     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

     <link rel="stylesheet" href="bootstrap/css/style.css">

     <!--[if lte IE ]>

     <script src="bootstrap/js/respond.min.js"></script>

     <script src="bootstrap/js/html5.js"></script>

     <![endif]-->

     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>

     <script src="bootstrap/js/bootstrap.min.js"></script>

 </head>

 <body>

 </body>

 </html>

好了，去看看怎么样吧。

Bootstrap 3 兼容 IE8 浏览器的更多相关文章

  1. 【转】让Bootstrap 3兼容IE8浏览器

    FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...

  2. 让Bootstrap 3兼容IE8浏览器

    最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...

  3. Bootstrap 3兼容IE8浏览器（转）

    Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分 ...

  4. 浅谈如何让 Bootstrap 3兼容IE8浏览器

    Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.-- Bootstrap 官网 Bootstrap 来自 Twitter,是目前最 ...

  5. bootstrap3兼容ie8浏览器

    bootstrap3 兼容IE8浏览器 2016-01-22 14:01 442人阅读 评论(0) 收藏 举报  分类: html5(18)    目录(?)[+]   近期在使用bootstrap这 ...

  6. 【Bootstrap】兼容IE8、谷歌和其他主流浏览器的观众IMAX风格的页面

    尽管说IE6除了苛刻要求的一部分,我们一直没能考虑,但WIN7内置的浏览器IE8还需要支持. 在本文中,基本这种方法的优点,我个人认为,这是准备少.我们不需要在网上找了很多照片,使材料,你只要准备好了 ...

  7. bootstrap3 兼容IE8浏览器

    近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等,bootstrap ...

  8. bootstrap table 兼容ie8 -- refreshOptions

    今天项目使用 bootstrap table 在ie8下发现 方法 refreshOptions 报错. 经过调试监控发现错误如下: 153 行 代码 Object.getOwnPropertyNam ...

  9. 如何使用videojs兼容IE8浏览器

    需要在服务器下运行 首先我们需要下载videojs包 https://github.com/videojs/video.js/releases 这里简单写了一个小栗子 <!DOCTYPE htm ...

随机推荐

  1. Visual Studio 2013 RTM 中文语言包官方下载地址发布

    如果你下载的是英文版,你想安装一个中文的visual studio 2013,那么你大可不必重新下载安装visual studio 2013,因为微软提供了Visual Studio 2013 RTM ...

  2. 6 关于 Oracle NULL栏位和PL./SQL执行实验

    今日有针对NULL值有了相关实验. 对NULL 值插入的讨论. 1, PL/SQL 中可以执行插入''或者NULL 的操作, 前提是栏位允许为空. 2, 可以对NULL进行一系列数据库运算. 如:   ...

  3. linux下安装svn（基于编码的方式）

    svn是什么,相信能看到这里的同学应该不会有这个问题了,费话不多说,开始: 1.创建目录 mkdir /home/svn/ 2.获取安装svn所需源文件(svn的官方网址是http://subvers ...

  4. 简单的背包变形HDU1203，HDU2955

    今天一直在写背包,不过中间停了一段时间在写shell. 一直在做01背包.今天做了这两题很相似的背包 首先是HDU1203 Speakless很早就想出国,现在他已经考完了所有需要的考试,准备了所有要 ...

  5. ARM开发板系统移植-----u-boot的编译

    本文和另外两篇姊妹篇都是为了说明如何裁剪出适合在mini2440 开发板上运行的Linux系统,以记录自己的学习成果.其中本文先介绍了嵌入式系统的软件组成部分,然后介绍编译出适合在mini2440开发 ...

  6. jQuery 标签淡入淡出 个人随笔

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 为什么我们需要使用 touch 命令

    为什么我们需要使用 touch 命令 既然 touch 命令描述的是改变时间戳,那么我们可能会想为什么我们需要去改变时间戳呢?这个问题会引发我们的深思.然而,我想有个理由可以解释为什么我们需要使用它. ...

  8. jQuery监听键盘事件及相关操作使用

    一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() k ...

  9. Python资源汇集

    Python资源汇集 一 实用教程 廖雪峰网站 第一,Python教程:提供了循序渐进,重点是可操作的实用教程. 第二,Web App 项目教程.给出一个用16天完成的Python Web APP项目 ...

  10. 聊一聊c++中指针为空的三种写法 ----->NULL, 0, nullptr

    看到同事用了一下nullptr.不是很了解这方面东东,找个帖子学习学习 http://www.cppblog.com/airtrack/archive/2012/09/16/190828.aspx N ...