bootstrap兼容IE8,IE7
2016-06-14 12:02
441 查看
今天需要调整页面兼容IE7
学习了:http://www.lxway.com/444544602.htm
百度了下
前者定义媒体查询,后者确定显示此网页的IE版本
<meta name="viewport" content="width=device-width,initial-scale=1" >
<meta name="renderer" content="webkit">
<meta name="renderer" content="ie-stand">
<meta name=”renderer” content=”webkit|ie-comp|ie-stand” />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- JS -->
<script type="text/javascript" src="${contextPath}/static/jquery/jquery-2.1.4.min.js"></script>
<!--[if lte IE 8]>
<script src="${contextPath}/static/respond.min.js"></script>
<script src="${contextPath}/static/html5shiv.js"></script>
<script type="text/javascript" src="${contextPath}/static/jquery/jquery-1.11.3.min.js"></script>
<![endif]-->
html5shiv : html5.js(Google Code)(Github)是让不(完全)支持html5的浏览器“支持”html5标签。
Jquery 2.0以上就不再支持IE 6/7/8 这三大虐心神器了。所以要想使用Bootstrap3中的一些插件效果,比如modal 弹出层对话框这类控件。我们就需要添加 2.0以下的,这里我用1.10.2的Jquery库。
详情请见:https://github.com/scottjehl/Respond#cdnx-domain-setup
Github上说,这个js是通过ajax一份你的css文件。所以需要一个代理页面去请求文件。
需要上传一些文件,步骤比较复杂,而且一般公共CDN基本没人有这种操作权限。
之后再添加代码。
本人也正是做了个Bootstrap3的小项目(姓名代码查询,由于使用CDN,E8有短暂屏闪,且屏闪无法避免),正是这个项目让我总结以上经验出来。
主要还是在于让respond.js起效果,关键就是让bootstrap的文件和respond.js同域,不同域需要用CDN上的html做ajax。
学习了:http://www.lxway.com/444544602.htm
百度了下
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
前者定义媒体查询,后者确定显示此网页的IE版本
<meta name="viewport" content="width=device-width,initial-scale=1" >
<meta name="renderer" content="webkit">
<meta name="renderer" content="ie-stand">
<meta name=”renderer” content=”webkit|ie-comp|ie-stand” />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- JS -->
<script type="text/javascript" src="${contextPath}/static/jquery/jquery-2.1.4.min.js"></script>
<!--[if lte IE 8]>
<script src="${contextPath}/static/respond.min.js"></script>
<script src="${contextPath}/static/html5shiv.js"></script>
<script type="text/javascript" src="${contextPath}/static/jquery/jquery-1.11.3.min.js"></script>
<![endif]-->
引入respond.js 和 html5.js
respond.js(Github)是用于媒体查询的,项目说明描述:要和需要进行媒体查询的文件放在同一域中。不然CDN部署的需要更改一些选项,之后再说。html5shiv : html5.js(Google Code)(Github)是让不(完全)支持html5的浏览器“支持”html5标签。
<!--[if lte IE 9]> <script src="bootstrap/js/respond.min.js"></script> <script src="bootstrap/js/html5.js"></script> <![endif]-->
Jquery 2.0以上就不再支持IE 6/7/8 这三大虐心神器了。所以要想使用Bootstrap3中的一些插件效果,比如modal 弹出层对话框这类控件。我们就需要添加 2.0以下的,这里我用1.10.2的Jquery库。
CSS文件在CDN上(或子域名)的Respond.js部署
详情请见:https://github.com/scottjehl/Respond#cdnx-domain-setupGithub上说,这个js是通过ajax一份你的css文件。所以需要一个代理页面去请求文件。
需要上传一些文件,步骤比较复杂,而且一般公共CDN基本没人有这种操作权限。
之后再添加代码。
<!-- Respond.js proxy on external server --> <link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" /> <!-- Respond.js redirect location on local server --> <link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" /> <!-- Respond.js proxy script on local server --> <script src="/path/to/respond.proxy.js"></script>
本人也正是做了个Bootstrap3的小项目(姓名代码查询,由于使用CDN,E8有短暂屏闪,且屏闪无法避免),正是这个项目让我总结以上经验出来。
主要还是在于让respond.js起效果,关键就是让bootstrap的文件和respond.js同域,不同域需要用CDN上的html做ajax。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="Jophy" />
<title>ie8</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/style.css">
<!--[if lte IE 9]> <script src="bootstrap/js/respond.min.js"></script> <script src="bootstrap/js/html5.js"></script> <![endif]-->
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
相关文章推荐
- bootstrap 表格插件bootstrap-table的使用
- 3.1Bootstrap学习组件篇之下拉菜单、图标
- 级联两个bootstrap-table。一张表显示相关的数据,通过点击这张表的某一行,传过去对应的ID,刷新另外一张表。
- bootstrap sr-only
- bootstrap首页制作
- Bootstrap标签页插件
- Bootstrap滚动监听插件
- bootstrap走动的进度条
- Bootstrap tutorial: A responsive design tutorial with Twitter Bootstrap 3
- BootStrap智能表单实战系列(十一)级联下拉的支持
- 给AspNetPager分页控件添加bootstrap样式
- BootStrap 智能表单实战系列(十)自动完成组件的支持
- BootStrap智能表单实战系列(九)表单图片上传的支持
- Bootstrap下拉菜单插件
- Bootstrap模态框插件
- BootStrap智能表单实战系列(八)表单配置json详解
- BootStrap智能表单实战系列(七)验证的支持
- bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验
- BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
- BootStrap 智能表单实战系列(五) 表单依赖插件处理