编程 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 相关文章推荐

在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript

Dec 02 Javascript

基于Jquery制作的幻灯片图集效果打包下载

Feb 12 Javascript

js模仿jquery的写法示例代码

Jun 16 Javascript

js 采用delete实现继承示例代码

May 20 Javascript

javascript 10进制和62进制的相互转换

Jul 31 Javascript

jQuery中contents()方法用法实例

Jan 08 Javascript

js定义类的几种方法(推荐)

Jun 08 Javascript

JS仿百度自动下拉框模糊匹配提示

Jul 25 Javascript

收藏AngularJS中最重要的核心功能

Jul 09 Javascript

Node.js Buffer用法解读

May 18 Javascript

js实现京东秒杀倒计时功能

Jan 21 Javascript

vue之a-table中实现清空选中的数据

Nov 07 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实现WEB动态网页静态

2006/10/09 PHP

PHP使用数组依次替换字符串中匹配项

2016/01/08 PHP

redirect_uri参数错误的解决方法(必看)

2017/02/16 PHP

一段实时更新的时间代码

2006/07/07 Javascript

javascript 设置某DIV区域内的checkbox复选框

2009/11/30 Javascript

JavaScript高级程序设计（第3版）学习笔记7 js函数（上）

2012/10/11 Javascript

jquery解决客户端跨域访问问题

2015/01/06 Javascript

jQuery实现可展开合拢的手风琴面板菜单

2015/09/15 Javascript

JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例

2015/12/04 Javascript

微信小程序 label 组件详解及简单实例

2017/01/10 Javascript

AngularJS2中一种button切换效果的实现方法（二）

2017/03/27 Javascript

基于BootStrap的前端分页带省略号和上下页效果

2017/05/18 Javascript

vue页面使用阿里oss上传功能的实例（一）

2017/08/09 Javascript

JS与HTML结合实现流程进度展示条思路详解

2017/09/03 Javascript

详解vue后台系统登录态管理

2019/04/02 Javascript

微信小程序实现的一键连接wifi功能示例

2019/04/24 Javascript

[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛胜者组 BO3 第二场 8.21.mp4

2020/07/19 DOTA

python实现逆波兰计算表达式实例详解

2015/05/06 Python

微信跳一跳辅助python代码实现

2018/01/05 Python

Python基于opencv的图像压缩算法实例分析

2018/05/03 Python

python爬虫的数据库连接问题【推荐】

2018/06/25 Python

在Python中合并字典模块ChainMap的隐藏坑【推荐】

2019/06/27 Python

详解CSS3 弹性布局快速入门

2019/06/06 HTML / CSS

描述一下JVM加载class文件的原理机制

2013/12/08 面试题

英文简历中的自我评价用语

2013/12/09 职场文书

个人自我评价和职业目标

2014/01/24 职场文书

网站客服岗位职责

2014/04/05 职场文书

博士毕业生自我鉴定范文

2014/04/13 职场文书

学生保证书

2015/01/16 职场文书

锅炉工岗位职责

2015/02/13 职场文书

德能勤绩廉个人总结

2015/02/14 职场文书

2016母亲节感恩话语

2015/12/09 职场文书

浅析InnoDB索引结构

2021/04/05 MySQL

关于Oracle12C默认用户名system密码不正确的解决方案

2021/10/16 Oracle

php实例化对象的实例方法

2021/11/17 PHP

详细介绍python操作RabbitMq

2022/04/12 Python