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

在Z-Blog中运行代码[html][/html]（纯JS版）

Mar 25 Javascript

javascript 随机展示头像实现代码

Dec 06 Javascript

5个javascript的数字格式化函数分享

Dec 07 Javascript

Javascript实现图片轮播效果(二)图片序列节点的控制实现

Feb 17 Javascript

详解Angular2中Input和Output用法及示例

May 21 Javascript

使用requirejs模块化开发多页面一个入口js的使用方式

Jun 14 Javascript

前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来

Nov 14 jQuery

vue实现标签云效果的方法详解

Aug 28 Javascript

JavaScript实现京东放大镜效果

Dec 03 Javascript

Vue中通过属性绑定为元素绑定style行内样式的实例代码

Apr 30 Javascript

微信公众号网页分享功能开发的示例代码

May 27 Javascript

vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

Oct 09 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许愿墙模块功能分析

2013/06/25 PHP

php实现读取手机客户端浏览器的类

2015/01/09 PHP

PHP的消息通信机制测试实例

2016/11/10 PHP

Yii2 中实现单点登录的方法

2018/03/09 PHP

编写跨浏览器的javascript代码必备[js多浏览器兼容写法]

2008/10/29 Javascript

判断iframe是否加载完成的完美方法

2010/01/07 Javascript

Javascript 判断Flash是否加载完成的代码

2010/04/12 Javascript

js仿百度有啊通栏展示效果实现代码

2013/05/28 Javascript

setInterval()和setTimeout()的用法和区别示例介绍

2013/11/17 Javascript

解析jquery中的ajax缓存问题

2013/12/19 Javascript

jquery实现美观的导航菜单鼠标提示特效代码

2015/09/06 Javascript

JS实现获取剪贴板内容的方法

2016/06/21 Javascript

jQuery解析与处理服务器端返回xml格式数据的方法详解

2016/07/04 Javascript

老生常谈js动态添加事件--- 事件委托

2016/07/19 Javascript

js实现表格筛选功能

2017/01/18 Javascript

vue项目使用微信公众号支付总结及遇到的坑

2018/10/23 Javascript

javascript实现随机抽奖功能

2020/12/30 Javascript

[03:54]Ehome出征西雅图回顾2016国际邀请赛晋级之路

2016/08/02 DOTA

python实现百万答题自动百度搜索答案

2018/01/16 Python

Python命名空间的本质和加载顺序

2018/12/17 Python

python多线程共享变量的使用和效率方法

2019/07/16 Python

Mac安装python3的方法步骤

2019/08/09 Python

python的命名规则知识点总结

2019/10/04 Python

详解Django配置优化方法

2019/11/18 Python

python程序输出无内容的解决方式

2020/04/09 Python

Python实现寻找回文数字过程解析

2020/06/09 Python

Yahoo-PHP面试题2

2014/12/06 面试题

Java面试题汇总

2015/12/06 面试题

售后服务经理岗位职责范本

2014/02/22 职场文书

潘婷洗发水广告词

2014/03/14 职场文书

教师优秀党员事迹材料

2014/08/14 职场文书

故宫英文导游词

2015/01/31 职场文书

2015年超市工作总结

2015/04/09 职场文书

优秀教师工作总结2015

2015/07/22 职场文书

2016新年感言

2015/08/03 职场文书

win10如何开启ahci模式?win10开启ahci模式详细操作教程

2022/07/23 数码科技