近期在使用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. [OpenCV] Install openCV in Qt Creator

    Learn openCV.pdf qmake: link with opencv (Key Point) QT += core gui greaterThan(QT_MAJOR_VERSION, 4) ...

  2. Tips6:用[HideInInspector]在Inspector中隐藏变量

    你曾想要把某些公有变量在Inspetor面板中隐藏起来吗,这样很简单就能做到. 让我们来看以下代码: using UnityEngine; public class HidingScript : Mo ...

  3. android高级---->AsyncTask的源码分析

    在Android中实现异步任务机制有两种方式,Handler和AsyncTask,它在子线程更新UI的例子可以参见我的博客(android基础---->子线程更新UI).今天我们通过一个小的案例 ...

  4. 基于HTML5技术的电力3D监控应用（四）

    回答了知乎问题较长,一些使用WebGL的经验,作为新的一篇: 正好逛到这个问题,正好是2013年底,正好最近基于的HT for Web 3D做的电力项目收尾,正好用到的就是WebGL技术,因此说说自己 ...

  5. Android的init过程（二）：初始化语言（init.rc）解析

    Android的init过程(一) 本文使用的软件版本 Android:4.2.2 Linux内核:3.1.10 在上一篇文章中介绍了init的初始化第一阶段,也就是处理各种属性.在本文将会详细分析i ...

  6. 搜索 + 剪枝 --- POJ 1101 : Sticks

    Sticks Problem's Link:   http://poj.org/problem?id=1011 Mean: http://poj.org/problem?id=1011&lan ...

  7. 环信SDK与Apple Watch的结合（1）

    该系列是记录在apple watch上开发IM,用到了最近挺流行的环信IM SDK. 一.先来一段网上随处可查到的信息: 1.两种分辨率 1.65寸 312*390 1.5寸 272*340 2.开发 ...

  8. 加密–RSA前端与后台的加密&解密

    1. 前言 本问是根据网上很多文章的总结得到的. 2. 介绍 RSA加密算法是一种非对称加密算法. 对极大整数做因数分解的难度决定了RSA算法的可靠性.换言之,对一极大整数做因数分解愈困难,RSA算法 ...

  9. PowerShell 从网站上下载文件

    在cmd下 执行powershell,可能会出现禁止运行的策略, 运行如下命令: powershell set-executionpolicy remotesigned 然后运行: powershel ...

  10. js获取浏览器当前窗口的高度长度

    js获取浏览器可见区域(不包括标题栏.地址栏.收藏夹栏状态栏等额外区域,仅为页面呈现区域)的高度和宽度宽度:document.documentElement.clientWidth高度:documen ...