近期在使用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. 数据可视化(3)--Google Charts

    Google Chart API 是谷歌提供的一项动态生成图表的服务.你可以随时自定义图表,以适应网站的外观和感觉.图表使用HTML5/SVG技术提供给iPhone手机, iPad和Android的跨 ...

  2. [Node.js] OAuth 2 和 passport框架

    原文地址:http://www.moye.me/?p=592 OAuth是什么 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列 ...

  3. js 实现各种排序

    一 冒泡排序 一万个随机数排序五次执行时间分别为 362 389 361 372 408 毫秒 var arr=[]; for(var j=0;j<10000;j++){ arr.push(Ma ...

  4. IOS开发UI基础UIPageControl的属性

    UIPageControl 常见属性: •    numberOfPages // 设置有多少页 默认为0 [pageControl setNumberOfPages:kImageCount]; •  ...

  5. iOS实现图像素描效果

    使用GPUImageSketchFilter对象实现图像素描效果 NSString *const kGPUImageSketchFragmentShaderString = SHADER_STRING ...

  6. Linq查询简介

    查询是一种从数据源检索数据的表达式. 查询通常用专门的查询语言来表示. 随着时间的推移,人们已经为各种数据源开发了不同的语言:例如,用于关系数据库的 SQL 和用于 XML 的 XQuery. 因此, ...

  7. 重构if...else...或者switch程序块

    我们在开发asp.net时,经常有使用if...else...或者是使用switch来进行多个条件判断.如下面这篇<用户控件(UserControl) 使用事件 Ver2>http://w ...

  8. MIME（Multipurpose Internet Mail Extensions）的简介

    多用途互联网邮件扩展类型(MIME) 作用:用于标识Web资源类型(Multipurpose Internet Mail Extensions,MIME) 效果:Web上MIME为每种类型的资源提供一 ...

  9. 【循序渐进学Python】6.Python中的函数

    1. 创建函数 一个函数代表一个行为并且返回一个结果(包括None),在Python中使用def关键字来定义一个函数,如下: def hello(name): print 'hello,' + nam ...

  10. 关于下载DynamicDataDisplay.dll后被默认锁定的问题

    问题:命名空间 d3:“http://research.microsoft.com/DynamicDataDisplay/1.0”不存在ChartPlotter元素 原因:下载DynamicDataD ...