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 相关文章推荐
javascript编程起步(第三课)
Feb 27 Javascript
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
jquery EasyUI的formatter格式化函数代码
Jan 12 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
详解js的视频和音频采集
Aug 09 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
详解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性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
Prototype Class对象学习
2009/07/19 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
Python PyCharm如何进行断点调试
2019/07/05 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
python 基于wx实现音乐播放
2020/11/24 Python
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
影视制作岗位职责
2013/12/04 职场文书
成品仓管员工作职责
2013/12/29 职场文书
大学生职业生涯规划书范文
2014/01/04 职场文书
美术国培研修感言
2014/02/12 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
单位工作证明范本
2015/06/15 职场文书
初级职称评定工作总结
2015/08/13 职场文书
《秋思》教学反思
2016/02/23 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server
Java实现注册登录跳转
2022/06/16 Java/Android