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 全角转半角部分
Oct 28 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
详解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
是否存在第一台收音机的说法
2021/03/01 无线电
PHP中的超全局变量
2006/10/09 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
php自定文件保存session的方法
2014/12/10 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
JS实现日期加减的方法
2013/11/29 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
koa-router源码学习小结
2018/09/07 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
环境工程毕业生自荐信
2013/11/17 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
党员思想汇报范文
2013/12/30 职场文书
总会计师岗位职责
2014/02/19 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
Python面向对象之内置函数相关知识总结
2021/06/24 Python
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers