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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
node+express制作爬虫教程
Nov 11 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
JavaScript实现alert弹框效果
Nov 19 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
深入PHP5中的魔术方法详解
2013/06/17 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
详解React中setState回调函数
2018/06/14 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
python求质数列表的例子
2019/11/24 Python
Keras实现DenseNet结构操作
2020/07/06 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
测试工程师岗位职责
2013/11/28 职场文书
老师自我鉴定范文
2013/12/25 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
困难补助申请报告
2015/05/19 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server