近期在使用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. [C#] 可空类型的实现原理

    int? 是可为null的值类型.只比int多一个值就是null. 思考: 同样的内存空间,怎么实现的多一个值的?都是4字节,32位,int?靠什么存在一个null值的. 发现: 分析一下内存,看看如 ...

  2. 2016校招内推 -- 腾讯SNG前端 -- 面试经历

    也是让某湿兄帮忙内推,然后过了四五天,电话打来了 一面: 1.首先是简单的自我介绍 2.你觉得一个前端工程师应该具备什么技能 比如用户体验这个方面他就贵问你具体的例子 3.让你设计一个web站点,假如 ...

  3. 原生JS实现瀑布流

    浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...

  4. CSS 最核心的四个概念

    本文将讲述 CSS 中最核心的几个概念,包括:盒模型.position.float等.这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成.为了掌握它们,有必要写出来探讨一下,如 ...

  5. petapoco-SQLServer模型增加注释

    petapoco是个基于T4模板的轻量级ORM,好用效率高,具体介绍略了 获取注释基本原理是调用数据库::fn_listextendedproperty函数,获取扩展属性MS_Description ...

  6. macbook装双系统多分区其实很简单，你只要把macbook当作一台普通pc就可以了！

    macbook装双系统多分区其实很简单,你只要把macbook当作一台普通pc就可以了! 不用理会苹果官网的警告,苹果官网警告你只能用bootcamp安装且不能多分区,把人吓得不轻.其实不用过多担心, ...

  7. 快捷获取浏览器（navigator对象）的全部属性

    理论:     navigator对象包含关于web浏览器的信息,浏览器的类型,版本信息都可以从该对象获取. 属性 说明 appCodeName 浏览器代码说明 appName 浏览器名称 appVe ...

  8. SQL Server密码管理的六个危险判断

    当管理SQL Server内在的帐户和密码时,我们很容易认为这一切都相当的安全.但实际上并非如此.在这里,我们列出了一些对于SQL Server密码来说非常危险的判断. 当管理SQL Server内在 ...

  9. sql server2008中左连接，右连接，等值连接的区别

    数据库中的连接我了解到有left join,right join,inner join这些,以下是它们的区别: 1)左连接(left join):先取出a表的所有数据,再取出a.b表相匹配的数据 2) ...

  10. 重新想象 Windows 8.1 Store Apps (84) - 图像处理的新特性, Share Contract 的新特性

    [源码下载] 重新想象 Windows 8.1 Store Apps (84) - 图像处理的新特性, Share Contract 的新特性 作者:webabcd 介绍重新想象 Windows 8. ...