近期在使用bootstrap这个优秀的前端框架，这个框架非常强大，框架里面有下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等,bootstrap都已经预先定义好了，当我们制作网页上，只需直接调用里面的css即可

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

　　Bootstrap在IE8中肯定不如Chrome、Firefox、IE11那么完美，部分组件不保证完全兼容，还是要Hack的

1、使用html5声明

<!DOCTYPE html>

这里不可以有空格

<html>

注：写成<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">是不可行的

2、加入meta标签

确定显示此网页的IE版本

<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />

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

注:bootstrap不支持IE兼容模式，为了让IE浏览器运行最新的渲染模式，将添加以上标签在页面中，IE=edge表示强制使用IE最新内核，chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame

3、引入bootstrap文件

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

4、引入html5shiv.min.js和respond.min.js

　  让不（完全）支持html5的浏览器“支持”html5标签

<!--[if lt IE 9]>

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

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

<![endif]-->

5、添加1.X版本的Jquery库

<script src="js/bootstrap/jquery-1.12.0.min.js"></script>

6、在IE8下测试，发现一个问题placeholder不被支持，下面是解决IE支持placeholder的方法，本文引用的jquery是1.12.0测试通过，先引用jquery

<script type="text/javascript" src="js/bootstrap/jquery-1.12.0.min.js"></script>

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

也可以用其他的jquery版本，再引入

<script type="text/javascript" src="js/bootstrap/jquery.placeholder.js"></script>

然后在文件中加入一下代码

<script type="text/javascript">

    $(function () {

        $('input, textarea').placeholder();

    });

</script>

代码总结如下：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />

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

    <title>ie8</title>

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

    <!--[if lte IE 9]>

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

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

    <![endif]-->

    <script src="js/bootstrap/jquery-1.12.0.min.js"></script>

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

</head>

<body>

</body>

</html>

附注：

1、IE下判断IE版本的语句

<!--[if lte IE 6]>

<![endif]-->

IE6及其以下版本可见

<!--[if lte IE 7]>

<![endif]-->

IE7及其以下版本可见

<!--[if IE 6]>

<![endif]-->

只有IE6版本可见

<![if !IE]>

<![endif]>

除了IE以外的版本

<!--[if lt IE 8]>

<![endif]-->

IE8以下的版本可见

<!--[if gte IE 7]>

<![endif]-->

IE7及大于IE7的版本可见

lte：就是Less than or equal to的简写，也就是小于或等于的意思。


lt ：就是Less than的简写，也就是小于的意思。


gte：就是Greater than or equal to的简写，也就是大于或等于的意思。


gt ：就是Greater than的简写，也就是大于的意思。


!
： 就是不等于的意思，跟javascript里的不等于判断符相同

2、bootstrap3相关css、js

　  下载地址:http://pan.baidu.com/s/1getpDjt

jquery.placeholder.js文件的下载地址https://github.com/mathiasbynens/jquery-placeholder

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

  1. bootstrap3兼容ie8浏览器

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

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

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

  3. 让Bootstrap 3兼容IE8浏览器

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

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

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

  5. Bootstrap 3 兼容 IE8 浏览器

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

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

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

  7. bootstrap3兼容IE8

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  9. angularjs1+requirejs+ bootstrap+ jQuery低版本配合兼容ie8+浏览器

    angularjs兼容低版本IE浏览器(IE8)angularjs在1.3之后的版本都是选择放弃对IE8及更低IE版本的支持,但是就目前的开发形式来看,IE8的使用客户还是蛮多的,最近有个项目要求尽量 ...

随机推荐

  1. 【转载】Debian/Ubuntu常见安装软件错误解决方案

    转载自:http://blog.csdn.net/eqera/article/details/6375293 1.错误: Can't find X includes. Please check you ...

  2. SQL Server 2014里的IO资源调控器

    在本文中,我们将来看看SQL Server 2014在资源调控器方面增加了哪些新的功能.资源调控器(Resource Governor)是从SQL Server 2008开始出现的一项功能.它是用于管 ...

  3. Weblogic魔法堂：AdminServer.lok被锁导致启动、关闭域失败

    一.判断AdminServer.lok被其进程锁死 >weblogic.management.ManagementException: Unable to obtain lock on **** ...

  4. UICollectionView使用以及与UITableView的区别

    在开始前我们在这先附一段最简单的代码 - (void)viewDidLoad { [super viewDidLoad]; UICollectionViewFlowLayout *layout = [ ...

  5. WatiN和HttpWatch交互简介

    Httpwatch是一款强大的网页数据分析工具,它可以在不改变浏览器和网络设置的基础上捕捉http和https数据.查看底层的http数据,包括headers, cookies, cache等,同时统 ...

  6. [ASP.NET] 使用 ASP.NET SignalR 添加实时 Web

    ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务 ...

  7. Linux平台Qt creator报错：Circular all <- first dependency dropped

    在Linux下安装好Qt 5.0之后,使用Qt Creator创建了一个基于QMainWindow的框架程序.原本应该可以顺利的完成编译工作,因为自带的模板工程没有经过任何修改.可是在编译整个工程的时 ...

  8. 介绍两种风格的URL

    两种风格的“动态资源”——统一资源定位符(Uniform Resource Lactor,URL) 当前互联网上主要有两种主要风格的URL: 第一种直接在URL中知名文件(比如xxx.php,xxx. ...

  9. 用于dbnull的数据转换。因为用convert.to无法转换dbnull类型

    /// <summary> /// add by wolf /// </summary> public static class ExtendObject { public s ...

  10. 部署时，出现用户代码未处理 System.Security.Cryptography.CryptographicException 错误解决方法

    转载:http://www.cnblogs.com/jys509/p/4499978.html 在调用RSA加密的.pfx密钥时,在本地调试没有问题,可以布署到服务器,就会报以下的错误: 用户代码未处 ...