bootstrap3 兼容IE8浏览器!


Posted in Javascript onMay 02, 2016

      近期在使用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版本,再引入

[code]<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里的不等于判断符相同

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
javascript变量声明实例分析
Apr 25 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
javascript实现列表切换效果
May 02 #Javascript
基于javascript编写简单日历
May 02 #Javascript
Bootstrap媒体对象的实现
May 01 #Javascript
Bootstrap进度条组件知识详解
May 01 #Javascript
BootStrap glyphicons 字体图标实现方法
May 01 #Javascript
JS实现左右无缝轮播图代码
May 01 #Javascript
JavaScript中的继承之类继承
May 01 #Javascript
You might like
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
vue移动端弹框组件的实例
2018/09/25 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
简单的python协同过滤程序实例代码
2018/01/31 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
pandas的resample重采样的使用
2020/04/24 Python
Python字符串三种格式化输出
2020/09/17 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
超级搞笑检讨书
2014/01/15 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
党员示范岗材料
2014/12/19 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
python中pymysql包操作数据库方法
2022/04/19 Python