bootstrap IE8 兼容性处理


Posted in Javascript onMarch 22, 2017

bootstrap IE8 兼容性处理

<!DOCTYPE html>
<html lang="zh-CN">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap IE8兼容性</title>
    <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" rel="external nofollow" />
    
    <!--[if lt IE 9]>
       <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-6" style="border: 1px solid red;">
          左侧
        </div>
        <div class="col-sm-6" style="border: 1px solid green;">
          右侧
        </div>
      </div>
    </div>
  </body>

</html>

针对 IE8 仍然需要额外引入 Respond.js 文件以支持媒体查询(media query)。

1、http协议下效果(如:http://192.168.12.40:8020/bootstrap/index.html):

bootstrap IE8 兼容性处理

2、file文件协议IE8下效果(如:C:\Users\dell\Documents\HBuilderProject\bootstrap\index.html)

bootstrap IE8 兼容性处理

如上图所示,已经不支持栅格布局。

主要存在的问题是:

Respond.js 与 file:// 协议

由于浏览器的安全机制,Respond.js 不能在通过 file:// 协议(打开本地HTML文件所用的协议)访问的页面上发挥正常的功能。如果需要测试 IE8 下面的响应式特性,务必通过 http 协议访问页面(例如搭建 apache、nginx 等)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
JS异步宏队列微队列原理详解
Sep 09 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 #Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 #Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 #Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 #Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 #Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 #Javascript
You might like
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
python使用fork实现守护进程的方法
2017/11/16 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
制冷与电控专业应届生求职信
2013/11/11 职场文书
初一新生军训方案
2014/05/22 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
2014年党建工作总结
2014/11/11 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis