bootstrap3 兼容IE8浏览器
近期在使用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版本,再引入
<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里的不等于判断符相同
2、bootstrap3相关css、js
下载地址:http://pan.baidu.com/s/1getpDjt
jquery.placeholder.js文件的下载地址https://github.com/mathiasbynens/jquery-placeholder
转载于:https://www.cnblogs.com/gamehiboy/p/5147390.html
bootstrap3 兼容IE8浏览器相关推荐
- 【兼容】兼容IE8浏览器
bootstrap3 兼容IE8浏览器 近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框 ...
- 让Bootstrap 3兼容IE8浏览器
看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说.有几个点大家要注意. 1.本地调试需要Web Server(如IIS.Apache,Nginx),单纯地本地打开文件不能看到兼容效果. 2 ...
- js导出word文档 可以兼容IE8+浏览器适配其他浏览器
js导出word文档,兼容IE8浏览器 其他浏览器需要引入两个文件:FileSaver.js 和 jqueryWordExport.js 需要兼容IE8浏览器需要引用:FileSaver.js exc ...
- 关于让bootstrap3兼容ie8
官网上有说Internet Explorer 8 和 9 是被支持的,然而,你要知道,很多 CSS3 属性和 HTML5 元素 -- 例如,圆角矩形和投影 -- 是肯定不被支持的.另外, Intern ...
- border-radius 兼容 IE8浏览器
我们都知道,前端开发最让人头疼的事情,就是兼容ie系列的浏览器了,不但麻烦还让人头秃,今天记录一个border-radius属性IE8浏览器兼容的问题.在IE8浏览器里面,border-radius这 ...
- 页面水印 原生js 兼容ie8浏览器
需求缘由 项目是前后端不分离开发的,很老的项目,里面很多插件只能支持ie8,业主公司浏览器都是ie8 ,这次想给所有页面添加用户水印,所以开发需要兼容ie8 水印代码 创建一个js 文件waterma ...
- bootstrap 兼容ie8浏览器
bootstrap 兼容ie8 简单说明 完整代码 Demo下载 简单说明 最近做项目碰到个问题,就是用bootstrap做后台框架的时候,发现IE9以下都不能完整的兼容. IE8表现为:界面兼容,b ...
- bootstrap 兼容ie8 浏览器
今天晚上在玩弄bootstrap的时候,发现在ie8上不兼容(吐槽下,即使是官方的demo,在ie8上,效果也非常差,),原来是不支持媒体查询的缘故,但在项目开发中,ie8肯定得考虑的,找了好久,终于 ...
- Bootstrap3兼容IE8
在使用Bootstarp3的时候,发现在IE8上面的支持并不好,其中使用的H5标签与响应式布局IE8是不支持的,看个例子: <!DOCTYPE html> <html>< ...
最新文章
- 使用Python部署机器学习模型的10个实践经验
- HOG和SIFT图像特征提取简述
- C#应用NPOI实现导出EXcel表格中插入饼状图(可实现动态数据生成)
- DCMTK:从DICOM封装的PDF存储对象中提取PDF文件
- Andriod: 在xml布局中使用自定义属性
- 关于URL指向的icon的存储问题
- 现在多少钱能和以80年代的万元户持平?
- Spark 连接 HBase 入库及查询操作
- 为什么Spring仍然会是云原生时代最佳平台之一?
- Python一键生成国庆出行攻略,助你出门远游嗨不停!
- 西北工业大学生态环境学院张文宇课题组博士后招聘启事
- 几个LabVIEW软件欢迎页面
- python中fetch_python 异步 fetch demo
- Mac 下 Nginx、PHP、MySQL 和 PHP-fpm 的安装和配置
- Mac SCP简单使用(Mac WinSCP)
- pom文件分析(笔记)
- 【vim小小记】vim的复制粘贴(包括系统剪贴板)
- C++ 数据结构之队列queue (henu.hjy)
- qt 从零开始搭建插件框架
- Windows11:如何下载Android源代码