编程 Javascript

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 等）。

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

bootstrap IE8 兼容性处理

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery(1.6.3) 中css方法对浮动的实现缺陷分析

Sep 09 Javascript

JS图片无缝、平滑滚动代码

Mar 11 Javascript

js动态修改整个页面样式达到换肤效果

May 23 Javascript

使用jquery制作弹出框效果

Apr 03 Javascript

js密码强度实时检测代码

Mar 02 Javascript

JS组件Bootstrap实现图片轮播效果

May 16 Javascript

Javascript for in的缺陷总结

Feb 03 Javascript

thinkjs 文件上传功能实例代码

Nov 08 Javascript

angularjs 缓存的使用详解

Mar 19 Javascript

Node.Js中实现端口重用原理详解

May 03 Javascript

vue获取data数据改变前后的值方法

Nov 07 Javascript

JavaScript实现随机点名器

Mar 25 Javascript

详解angular中通过$location获取路径(参数)的写法

Mar 21 #Javascript

jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码

Mar 21 #jQuery

Linux使用Node.js建立访问静态网页的服务实例详解

Mar 21 #Javascript

在 Angular 中实现搜索关键字高亮示例

Mar 21 #Javascript

js省市区级联查询（插件版&无插件版）

Mar 21 #Javascript

Bootstrap学习笔记轮播（Carousel）插件

Mar 21 #Javascript

详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）

Mar 21 #Javascript

You might like

php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法

2011/11/26 PHP

PHP常用编译参数中文说明

2014/09/27 PHP

php一行代码获取文件后缀名实例分析

2014/11/12 PHP

WordPress中用于获取及自定义头像图片的PHP脚本详解

2015/12/17 PHP

基于laravel Request的所有方法详解

2019/09/29 PHP

JS 文件传参及处理技巧分析

2010/05/13 Javascript

jQuery实现点击图片翻页展示效果的方法

2015/02/16 Javascript

javascript实现table选中的行以指定颜色高亮显示的方法

2015/05/13 Javascript

利用JQuery实现datatables插件的增加和删除行功能

2017/01/06 Javascript

jQuery简单实现MD5加密的方法

2017/03/03 Javascript

利用vue+elementUI实现部分引入组件的方法详解

2017/11/22 Javascript

微信小程序实现点赞、取消点赞功能

2018/11/02 Javascript

vue实现条件叠加搜索的解决方法

2019/05/28 Javascript

简述pm2常用命令集合及配置文件说明

2019/05/30 Javascript

vue使用自定义指令实现拖拽

2021/01/29 Javascript

微信小程序实现简单文字跑马灯

2020/05/26 Javascript

JavaScript实时更新当前的时间的示例代码

2020/07/15 Javascript

Vue实现穿梭框效果

2020/09/30 Javascript

[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE

2014/05/22 DOTA

[59:30]VG vs LGD 2019国际邀请赛淘汰赛胜者组 BO3 第二场 8.22

2019/09/05 DOTA

pygame学习笔记（6）：完成一个简单的游戏

2015/04/15 Python

将Python代码嵌入C++程序进行编写的实例

2015/07/31 Python

wxPython实现绘图小例子

2019/11/19 Python

Scrapy框架基本命令与settings.py设置

2020/02/06 Python

用OpenCV进行年龄和性别检测的实现示例

2021/01/29 Python

Zavvi荷兰：英国大型音像制品和图书游戏零售商

2018/03/22 全球购物

美国性感内衣店：Yandy

2018/06/12 全球购物

理肤泉加拿大官网：La Roche-Posay加拿大

2018/07/06 全球购物

土木工程应届生自荐信

2013/09/24 职场文书

大学生实习自我鉴定

2013/12/11 职场文书

少先队学雷锋活动总结范文

2014/03/09 职场文书

解除劳动关系协议书2篇

2014/11/28 职场文书

慈善募捐倡议书

2015/04/27 职场文书

田径运动会通讯稿

2015/07/18 职场文书

Vue过滤器（filter）实现及应用场景详解

2021/06/15 Vue.js

javascript函数式编程基础

2021/09/15 Javascript