1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <title>Bootstrap IE8兼容性</title>
  9. <link href="css/bootstrap.min.css" rel="stylesheet">
  10. <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
  11.  
  12. <!--[if lt IE 9]>
  13. <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  14. <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  15. <![endif]-->
  16.  
  17. </head>
  18.  
  19. <body>
  20. <div class="container">
  21. <div class="row">
  22. <div class="col-sm-6" style="border: 1px solid red;">
  23. 左侧
  24. </div>
  25. <div class="col-sm-6" style="border: 1px solid green;">
  26. 右侧
  27. </div>
  28. </div>
  29. </div>
  30. </body>
  31.  
  32. </html>

针对 IE8 仍然需要额外引入 Respond.js 文件以支持媒体查询(media query)。

1、http协议下效果(如:http://192.168.12.40:8020/bootstrap/index.html):

2、file文件协议IE8下效果(如:C:\Users\dell\Documents\HBuilderProject\bootstrap\index.html)

如上图所示,已经不支持栅格布局。

主要存在的问题是:

Respond.js 与 file:// 协议

由于浏览器的安全机制,Respond.js 不能在通过 file:// 协议(打开本地HTML文件所用的协议)访问的页面上发挥正常的功能。如果需要测试 IE8 下面的响应式特性,务必通过 http 协议访问页面(例如搭建 apache、nginx 等)。

bootstrap IE8 兼容性处理的更多相关文章

  1. CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

    css ie6,ie7,ie8 兼容性写法,CSS hack写法 margin-bottom:40px;       /*ff的属性*/margin-bottom:140px\9;    /* IE6 ...

  2. 关于bootstrap IE8的兼容性问题

    非常久没有写技术类的文章了.这几天在用bootstrap来做我们站点的UI框架,感觉还是不错的.只是遇到一点不大不小的问题,那就是有朋友在IE8下訪问我们的站点.界面变成了跟手机浏览一样的界面. 后来 ...

  3. IE8兼容性经验小结

    DOCTYPE 首先需要确保HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响: 1.对标记,attributes, ...

  4. bootstrap IE8 相互兼容

    针对 IE8 仍然需要额外引入 Respond.js 文件(由于仍然利用了浏览器对媒体查询(media query)的支持,因此还需要做处理) <html lang="zh-cn&qu ...

  5. ie8兼容性总结

    DOCTYPE 首先需要确保你的HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响: 对标记.attributes ...

  6. ie8兼容性(不支持trim 、readonly光标、乱码encodeURI())

    IE8下String的Trim()方法失效的解决方案 1.用jquery的trim()方法,$.trim(str)就可以了. 2.String扩展: 第一种 String.prototype.trim ...

  7. 记录遇到的IE8兼容性问题汇总

    1,伪元素:first-child不起作用,需要单独指定样式名称 2,透明度表示方法,尤其在函数中表示 @mixin opacity($value) { -webkit-opacity: $value ...

  8. 解决Easyui1.3.3 IE8兼容性问题

    事先声明:项目在Firefox和Chrome上完美运行,在MSIE9.MSIE10上基本没问题,但是放在MSIE8上面运行问题就出来了.登录系统后,系统页面跳动,导致系统无法使用:我使用的是Easyu ...

  9. ueditor ie8兼容性问题

    ie8情况下,在进入加载有uEditor编辑器页面时候,不显示工具栏,会提示ueditor 缺少对象或者出现错误   1.引用Ueditor的js 的时候用 绝对路径       网上搜出来的一种解决 ...

随机推荐

  1. 警告1909。无法创建快捷方式VMware Workstation Pro.Ink。解决方法(附 VMware_workstation 12的安装方法)

    电脑之前装过VMware 10,很长时间没用就卸载了,也没有在意卸载的干不干净,直到最近需要用Linux系统,重新安装了VMware 12,就出现下面这样的情况: 警告1909.无法创建快捷方式VMw ...

  2. linux c语言定时器

    原文来自于:http://hi.baidu.com/opetrhsxszbckzd/item/126966cae5f9524aa9ba94f5 我只是把其重新排版标注一下. linux c语言定时器 ...

  3. java_JDBC(4)

    一.Statement import java.sql.*; public class TestJDBC { public static void main(String[] args) { Conn ...

  4. 神秘的ApplicationPoolIdentity再也不用妈妈担心程序池安全了

    在IIS 7和IIS 7.5中,我们可以为应用程序池设置一个特殊的Identity(用户标识):ApplicationPoolIdentity. 那么这个标识到底是什么意思?它是具体什么身份呢?这一讲 ...

  5. 特殊的string类型

    1.前言 string是属于引用类型的,这个大家都知道吧?但是平常在使用的过程中,发现它还是拥有一些值类型的特征的,这到底是为什么呢? 原因就是.Net考虑到假如大量的操作string对象的时候,大量 ...

  6. 基于vue2+vuex2+vue-router+axios+elementUI做的自动化后台模板

    github地址:https://github.com/sailengsi/sls-admin 此项目重点突出在架构上模式,这个架构模式,可以让我们在开发中,很方便的拓展与维护,并且可以保持结构清晰的 ...

  7. 利用matlab进行协方差运算

    本文全部参考自: http://www.cnblogs.com/welen/articles/5535042.html#undefined 知识点一: MATLAB中四个取整函数具体使用方法如下:Ma ...

  8. 如何创建DLL文件

    动态链接库(DLL)是从C语言函数库和Pascal库单元的概念发展而来的.所有的C语言标准库函数都存放在某一函数库中.在链接应用程序的过程中,链接器从库文件中拷贝程序调用的函数代码,并把这些函数代码添 ...

  9. ZooKeeper的不同类型的Znodes

    在ZooKeeper中有3个不同类型的znodes:persistent, ephemeral, sequential Persistent Znodes(默认)在ZooKeeper中,这是默认的zn ...

  10. Android Monkey压力测试介绍

    monkey:通过Monkey程序模拟用户触摸屏幕.滑动Trackball. 按键等操作来对设备上的程序进行压力测试,检测程序多久的时间会发生异常. Monkey的构架 Monkey的参数 Monke ...