全系IE支持Bootstrap的解决方法


Posted in Javascript onOctober 19, 2015

最近做一个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>

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

Javascript 相关文章推荐
js 编程笔记 无名函数
Jun 28 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
解决vue移动端适配问题
Dec 12 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 #Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 #Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 #Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 #Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 #Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 #Javascript
在JavaScript中如何解决用execCommand(
Oct 19 #Javascript
You might like
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
Angular2.js实现表单验证详解
2017/06/23 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
vue2路由基本用法实例分析
2020/03/06 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
Python telnet登陆功能实现代码
2020/04/16 Python
详解Python 最短匹配模式
2020/07/29 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
高级销售员求职信
2013/10/25 职场文书
王老吉广告词
2014/03/20 职场文书
小学毕业感言200字
2015/07/30 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
小学大队委竞选口号
2015/12/25 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript