最近做一个 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> http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js%22%3E%3C/script%3E;
- <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script> http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js%22%3E%3C/script%3E;
- <![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"> http://www.w3.org/TR/html4/strict.dtd%22%3E;
这个我测试过, 不可行
最后我在 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> http://code.jquery.com/jquery-1.11.1.min.js%22%3E%3C/script%3E;
也可以用其他的 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
来源: http://www.qdfuns.com/article/18222/5cb7a58ce01deebf9c19f753a9a61138.html