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

Javascript中自动切换焦点实现代码

Dec 15 Javascript

通过javascript把图片转化为字符画

Oct 24 Javascript

js 立即调用的函数表达式如何写

Jan 12 Javascript

浅谈JavaScript的内置对象和浏览器对象

Jun 03 Javascript

jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)

Sep 08 Javascript

vue页面跳转后返回原页面初始位置方法

Feb 11 Javascript

Angular5集成eventbus的示例代码

Jul 19 Javascript

详解vue 不同环境配置不同的打包命令

Apr 07 Javascript

详解基于 Node.js 的轻量级云函数功能实现

Jul 08 Javascript

Vue基础配置讲解

Nov 29 Javascript

AutoJs实现刷宝短视频的思路详解

May 22 Javascript

浅谈vue 二级路由嵌套和二级路由高亮问题

Aug 06 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

Laravel框架用户登陆身份验证实现方法详解

2017/09/14 PHP

PHPCrawl爬虫库实现抓取酷狗歌单的方法示例

2017/12/21 PHP

PHP实现生成推广海报的方法详解

2018/03/14 PHP

php查询内存信息操作示例

2019/05/09 PHP

Javascript中的call()方法介绍

2015/03/15 Javascript

浅谈javascript原型链与继承

2015/07/13 Javascript

javascript求日期差的方法

2016/03/02 Javascript

20分钟轻松创建自己的Bootstrap站点

2016/05/12 Javascript

Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)

2016/07/14 Javascript

JS自定义滚动条效果简单实现代码

2020/10/27 Javascript

Vue中div contenteditable 的光标定位方法

2018/08/25 Javascript

玩转Koa之核心原理分析

2018/12/29 Javascript

配置eslint规范项目代码风格

2019/03/11 Javascript

layui富文本编辑器前端无法取值的解决方法

2019/09/18 Javascript

微信小程序返回箭头跳转到指定页面实例解析

2019/10/08 Javascript

[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散

2016/11/30 DOTA

详解Python设计模式编程中观察者模式与策略模式的运用

2016/03/02 Python

Python如何获得百度统计API的数据并发送邮件示例代码

2019/01/27 Python

实例讲解Python3中abs()函数

2019/02/19 Python

python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例

2020/03/06 Python

Blue Nile台湾：钻石珠宝商，订婚首饰、结婚戒指和精品首饰

2017/11/24 全球购物

Cole Haan官方网站：美国时尚潮流品牌

2017/12/06 全球购物

海量信息软件测试笔试题

2015/08/08 面试题

大学生个人实习的自我评价

2014/02/15 职场文书

大学新闻系应届生求职信

2014/06/02 职场文书

无私奉献演讲稿

2014/09/04 职场文书

乡镇党的群众路线教育实践活动领导班子对照检查材料

2014/09/25 职场文书

见习报告的格式

2014/10/31 职场文书

大学生个人学年总结

2015/02/15 职场文书

2015年社区工会工作总结

2015/05/26 职场文书

2016年校园重阳节广播稿

2015/12/18 职场文书

2016党员三严三实心得体会

2016/01/15 职场文书

Nginx工作原理和优化总结。

2021/04/02 Servers

python删除csv文件的行列

2021/04/06 Python

MySQL分库分表与分区的入门指南

2021/04/22 MySQL

Win11安全功能升级：内置防网络钓鱼功能

2022/04/08 数码科技