最近做一个Web网站，之前一直觉得bootstrap非常好，这次使用了bootstrap3,在chrome,firefox,safari,opera，360浏览器（极速模式）、搜狗浏览器等浏览器下均没有问题，而在IE8及IE11下发现样式无法显示，然后各种百度啊，最后在 雅朋网 的一个网友帖子的帮助下解决了问题，也参考了 千寻学习网 的资料，先将解决方法总结如下：

首先需要确保你的HTML页面开始部分要有DOCTYPE声明。DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档，具体会影响：
对标记attributes 、properties的约束规则
对浏览器的渲染模式产生影响，不同的渲染模式会影响到浏览器对于CSS代码甚至JavaScript脚本的解析
DOCTYPE是非常关键的，目前的最佳实践就是在HTML文档的首行键入：
<!DOCTYPE html>

大神的帖子总结的bootstrap的查找原因好几条，首先，Bootstrap3 是移动设备优先的原则开发的，所以原因可能如下：
1.没有正确调用远程地址
即只要是IE9以下，就调用两个专门的js
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
但是我测试发现仅仅使用以上js文件不可行，
2.调用方法不正确
不要用file://或@import形式引用respond.min.js或respond.js或css文件

3.针对浏览器的内容做标识（使用meta标签调节浏览器的渲染方式）
bootstrap不支持IE兼容模式，为了让IE浏览器运行最新的渲染模式，将添加以下标签在页面中
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
IE=edge表示强制使用IE最新内核，chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame（可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Chrome浏览器内核），那么就用Chrome内核来渲染。关于此meta标签的具体说明，可参见StackOverflow上的精彩回答，<meta>标签高人的英文解释可以参看
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
我有加了一句
<meta http-equiv="X-UA-Compatible" content="IE=9" />
然后就可以了
内核控制Meta标签，因为目前国内的主流浏览器都是双内核，故而添加meta标签来告诉浏览器使用什么内核来渲染页面

4.IE8不支持container的几个属性
IE8不完全支持box-sizing:border-box与min-width, max-width, min-height或max-height的一起使用.所以，v3.0.1的bootstrap中对container的类，已经不再使用max-width了。

5.JS与CSS的引入顺序导致的问题
必须先引用css在引用js
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" media="screen"/>
<script type="text/javascript" src="js/respond.min.js"></script>

6.DOCTYPE前后有空行
<!DOCTYPE html>
这里有空格也不行，要去掉空格
<html>

7.也可以手动修改bootstrap.css
如果您使用的是bootstrap2.1.1，修改了navbar-inner{ filter:none}可解决问题，如果使用的是3.0+版的，没有这段代码了，详细介绍请看连接
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8

8.使用quirks mode（兼容模式）
定义网页时，向后兼容旧的浏览器的模式就是quirks mode，与之对应的是“标准模式”就是 standard mode。具体是将<!DOCTYPE html>写成以前的这种
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
这个我测试过，不可行

最后我在IE11下测试通过，但是在IE8下测试，有发现一个问题placeholder不被支持
下面是解决IE支持placeholder的方法
本文引用的jquery是1.11.1测试通过，先引用jquery
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
也可以用其他的jquery版本
再引入<script type="text/javascript" src="js/jquery.placeholder.js"></script>
jquery.placeholder.js这个文件的下载地址https://github.com/mathiasbynens/jquery-placeholder
然后再文件中加入一下代码
<script type="text/javascript">
    $(function () {
        // Invoke the plugin
        $('input, textarea').placeholder();
    });
</script>
如果我这里为涉及到的或者问题依然没有解决的请移步http://hustlzp.com/post/2014/01/ie8-compatibility更加详细

以上IE6,7,8,9,10,11,chrome,firefox,safari,opera，360浏览器（极速模式）、搜狗浏览器测试通过，只有IE5.5似乎不太可行，总之问题解决到此，万恶的IE6-都叫它打酱油去吧

如果您不想使用jquery.placeholder.js,再不支持placeholder的浏览器下模拟placeholder实现
可参考此文讲很详细http://ju.outofmemory.cn/entry/1595

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 转载的更多相关文章

  1. 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法--(转)

    如有雷同,不胜荣幸,若转载,请注明 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了boot ...

  2. 转载------让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

    本文是转载及收藏 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在c ...

  3. bootstrap支持ie8 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

    做一个在线系统,PC端也要做,但要兼容千恶的IE8[IE6 是万恶,打死我都不会管IE6],IE8 是我底线了md, 在IE8下 bottstrap 错乱,变形,不支持一些属性的问题,下面看了一篇 某 ...

  4. 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

    首先需要确保你的HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响:对标记attributes .propertie ...

  5. 各版本IE兼容问题,IE6,IE7,IE8,IE9,IE10,IE11

    在网站开发和学习中,由于各种兼容性问题,让开发者挺烦恼的,我的学员也经常因为兼容问题来找我取经. 事实上,IE给出了解决方案,谷歌给出了解决方案,国内著名网站百度也将这个解决方案应用于IE的兼容性问题 ...

  6. 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 2012-04-25 16:29:04| 分类: 学习 |字号 订阅 在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE ...

  7. 记录各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

     记录遇到的IE BUG:  1.IE8开发者工具打不开 解决办法:IE8新增了开发人员工具,非常不错,比早期的DevToolbar好用多了.不过在我的Win7下 使用的时候偶尔会出现一个莫名其妙的问 ...

  8. 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 （转）

    x-ua-compatible 用来指定IE浏览器解析编译页面的model x-ua-compatible 头标签大小写不敏感,必须用在 head 中,必须在除 title 外的其他 meta 之前使 ...

  9. 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 http://www.jb51.net/css/383986.html

    在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题   百度源代码如下 复制代码 代码如下: <!Do ...

随机推荐

  1. cocos2d(CCSprite 用贝塞尔做抛物线，足球精灵并且同时做旋转放大效果)

    今天刚学到Cocos2d中的动作哪一张,自己做了一个用贝塞尔曲线足球精灵实现同时放大旋转和抛物线动作. 使用 [CCSpawn actions:,,]链接这几个动作,同时做.与CCSequence(一 ...

  2. StringEscapeUtils.unescapeHtml的使用

    在做代码高亮时,从数据库中取出代码如下(节选): <pre class="brush: java;"> 需要的应该是<pre class=\"brush ...

  3. RTB撕开黑盒子 Part 2: Algorithm Meets World

    Part 0介绍了RTB的胜出价格会在凌晨陡升.我们还介绍了一个Pace系统,如果这个系统所有的DSPs都用,那陡升的问题就会消失.Part 0中的系统中含有一个隐式的假设:任何两个请求都认为是相同的 ...

  4. MFC 数据库编程 增删改查的一个例子

    1.先看下效果图: 主界面: 一个最简单的1对多的表,一张Article(文章)表,一张Category(类别)表.有添加,修改,删除文章按钮.点击类别编辑按钮就会跳到第二个对话框.点击数据库配置就会 ...

  5. zookeeper使用跟原理

    zookeeper使用和原理 zookeeper介绍zookeeper是一个为分布式应用提供一致性服务的软件,它是开源的Hadoop项目中的一个子项目,并且根据google发表的<The Chu ...

  6. hdu 1698 Just a Hook（线段树基础）

    成段更新的线段树,加入了延时标记............ 线段树这种东西细节上的理解因人而异,还是要自己深入理解......慢慢来 #include <iostream> #include ...

  7. 方法控件[置顶] Asp.net总结（一）

    本文朋友在青岛逛街的时候突然想到的...这两天就有想写几篇关于方法控件的博客,所以回家到之后就奋笔疾书的写出来发表了 纵观 Asp.net的学习只会之路,可以发现 Asp.net可以分为以下几大块 控 ...

  8. log4j2日志配置

    背景 log4j2相对于log4j 1.x有了脱胎换骨的变化,其官网宣称的优势有多线程下10几倍于log4j 1.x和logback的高吞吐量.可配置的审计型日志.基于插件架构的各种灵活配置等. 1. ...

  9. abstract class与interface的区别与联系

    1.相同点:A. 两者都是抽象类,都不能实例化.B. interface实现类及abstract class的子类都必须要实现已经声明的抽象方法. 2. 不同点:A. interface需要实现,要用 ...

  10. [一波低姿势的usaco除草记]

    总共花了一个月左右 把一份usaco的总结刷了一遍 应该有一百四十多道题 在此纪念一下 总体来说 发现自己基础不是很稳 基本贪心和一些堆的做法还是有点弱鸡 一些dp还是有点弱 但是数据结构题几乎都可以 ...