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 相关文章推荐
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
JavaScript中的各种宽高属性的实现
May 08 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
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
PHP实现的策略模式示例
2019/03/20 PHP
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
python获取糗百图片代码实例
2013/12/18 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
python组合无重复三位数的实例
2018/11/13 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
军训自我鉴定200字
2014/02/13 职场文书
旅游文化节策划方案
2014/06/06 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
初中数学教学反思范文
2016/02/17 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang