Bootstrap 对 IE9 以下的浏览器存在一定的兼容问题, 要解决这个兼容问题, 必须引入相关的 JS 文件进行相应的处理才能解决. 下面本篇文章给大家介绍一下 Bootstrap 不支持 IE 的解决方法, 希望对大家有所帮助.
首先需要确保你的 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 标签的具体说明, 可参见 Stack Overflow 上的精彩回答,<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 更加详细
更多 Bootstrap 的相关知识, 可访问: web 前端自学 https://www.html.cn/ !!
来源: http://www.css88.com/framework/bootstrap/18001.html