让Bootstrap 3兼容IE8浏览器

Front-前端 213288 Views 0 Comments

看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说。有几个点大家要注意。

1、本地调试需要Web Server(如IIS、Apache,Nginx),单纯地本地打开文件不能看到兼容效果。

2、如果你发现已经引用了respond.js和Bootstrap,仍无效果,请查看你的Bootstrap是否使用了CDN文件。(详情看第4点)

3、本文主要针对Bootstrap3版本,如果你是Bootstrap2 ,请搜索 BSIE ,还可以兼容IE6浏览器.

4、Bootstrap3 需要Html5文档声明。

最近在研究Bootstrap(官方Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。Bootstrap他们预先定义好,等要进行正式制作网页的时候,我们可以直接用里面的class就可以了。

今天不多介绍Bootstrap的功能,以后有机会可以重点介绍一下,确实十分优秀。响应式布局,定制性强,组件丰富,与Jquery完美契合。

进入主题,说说Bootstrap 3的兼容IE8问题。

Bootstrap是一个响应式的布局,你可以在宽屏电脑、普通电脑,平板电脑,手机上都得到非常优秀的布局体验。这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分辨率来匹配不同的样式。IE8浏览器并不支持这一优秀的Css3特性,Bootstrap在开发文档中写了如何使用进行兼容IE8。但是笔者多次尝试没有成功,IE8的布局是乱的。直到今天忍无可忍,决定再尝试一下,最终获得成功。有些细节没有注意到,导致IE8没法响应式布局。

下面讲解下如何让Bootstrap 3兼容IE8浏览器,至于有人会问我如何兼容IE6 IE7,请绕道搜索bsie (bootstrap2)。

Bootstrap在IE8中肯定不如Chrome、Firefox、IE11那么完美,部分组件不保证完全兼容,还是要Hack的。这里不谈。

1、使用html5文档声明

使用zencoding的用户 输入 html:5 再按Tab键即可。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

 

2、加入meta标签

前者定义媒体查询,后者确定显示此网页的IE版本。

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

3、引入bootstrap文件

这步十分重要,这里要看你是引用其他网站(CDN)的bootstrap文件还是把Bootstrap文件放本地。
这里我放在本地,因为之后的部署比较简单。

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

 4、引入respond.js 和 html5.js

respond.jsGithub)是用于媒体查询的,项目说明描述:要和需要进行媒体查询的文件放在同一域中。不然CDN部署的需要更改一些选项,之后再说。

html5shiv : html5.js(Google Code)(Github)是让不(完全)支持html5的浏览器“支持”html5标签。

<!--[if lte IE 9]>
<script src="bootstrap/js/respond.min.js"></script>
<script src="bootstrap/js/html5.js"></script>
<![endif]-->

4.1 CSS文件在CDN上(或子域名)的Respond.js部署

详情请见:https://github.com/scottjehl/Respond#cdnx-domain-setup

Github上说,这个js是通过ajax复制一份你的css文件。所以需要一个代理页面去请求文件。

需要上传一些文件,步骤比较复杂,而且一般公共CDN基本没人有这种操作权限。

之后再添加代码。

 <!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />

<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />

<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>

 

5、添加1.X版本的Jquery库

Jquery 2.0以上就不再支持IE 6/7/8 这三大虐心神器了。所以要想使用Bootstrap3中的一些插件效果,比如modal 弹出层对话框这类控件。我们就需要添加 2.0以下的,这里我用1.10.2的Jquery库。

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>

 6、总结

本人非前端工程师,只是爱好者一枚,如有错误还请批评指教。大家相互学习~

本人也正是做了个Bootstrap3的小项目(姓名代码查询,由于使用CDN,E8有短暂屏闪,且屏闪无法避免),正是这个项目让我总结以上经验出来。

主要还是在于让respond.js起效果,关键就是让bootstrap的文件和respond.js同域,不同域需要用CDN上的html做ajax。

懒人代码总结如下:

<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="author" content="Jophy" />
	<title>ie8</title>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="bootstrap/css/style.css">
	<!--[if lte IE 9]>
	<script src="bootstrap/js/respond.min.js"></script>
	<script src="bootstrap/js/html5.js"></script>
	<![endif]-->
	<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>

 

转载请注明:卓非博客 » 让Bootstrap 3兼容IE8浏览器

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

最新评论 (40)

  1. 看似有点复杂,不知道用起来怎么样。

    屠龙2014-05-29 20:34 回复
  2. 楼主,我把你的页面都copy下来,为什么在我本地没有反应那,保证CSS和JS都已经引入了,代码和你的一模一样

    小克2014-07-02 10:33 回复
    • 本地打开看不到的哥哥人家文档已经说了

      锋尘落2016-06-03 18:55 回复
    • 注意看第四我这ie8看他这网站已经兼容了

      锋尘落2016-06-03 18:55 回复
  3. 这是IE9的兼容吧,不是IE8的

    一人2015-06-15 20:25 回复
  4. 有个demo就更好咯

    letji2015-10-22 10:26 回复
  5. 很好,不错

    sadkilo2015-11-19 17:17 回复
  6. 搞定了,谢谢

    老中医2016-01-05 09:58 回复
    • 怎么搞定的,能不能解释一下

      thr2016-02-26 11:27 回复
  7. 很好 谢谢

    谷谷子谷子2016-02-29 10:32 回复
  8. 代码显然错了好不好。。。

    昵称2016-03-08 18:30 回复
    • 呵呵,遇到你这样的读者也是搞笑。显然,显然在哪里?

      Jophy2016-03-20 21:25 回复
  9. 赞 成功解决问题 !

    a'a'a2016-04-18 22:02 回复
  10. 亲,如果用了滑动门2.1的插件,还能兼容IE8吗?

    asd2016-04-21 15:18 回复
    • 具体插件要看插件的描述,到底支持与不支持,我暂时不清楚

      Jophy2016-07-09 18:32 回复
  11. 这个的意思是使用最高版本的ie来兼容,如果电脑上只装了ie8没有装其他的比如ie11等比较高的版本,也就是电脑最高版本的ie是ie8,其实一样没有效果。

    mrl2016-05-10 10:58 回复
    • 你确定?
      你仔细阅读了么?

      Jophy2016-05-12 13:40 回复
  12. cdn的css 跟 js 都没~~ 用本地文件做的实验~~一点效果都没感觉到

    士大夫2016-05-23 16:48 回复
    • 首先这个兼容是需要有web容器支持的,其次兼容IE8也是从功能性兼容的。不可能做到和chrome这类现代浏览器一样的视觉效果。只是可以进行media query和部分html5标签支持。

      Jophy2016-07-09 18:33 回复
  13. 没有效果,没有效果,不知道哪的问题

    冲上云霄2016-06-03 16:23 回复
  14. 大神,4.1,那一条能不能能再详细说明一下,一点都明白怎么办啊

    清清2016-06-15 14:00 回复
    • 简单来说就是不要使用公共CDN提供的静态资源文件,要将文件放置本地来使respond.js生效。

      Jophy2016-07-09 18:30 回复
  15. 太厉害了。瞬间解决!!!

    挨踢民工2016-06-30 22:03 回复
  16. 不生效。不生效。不生效。

    艾丝凡2016-07-21 17:17 回复
    • 不生效就对了

      屠龙勇士2016-07-29 20:47 回复
  17. 确定可以兼容到IE8?

    屠龙勇士2016-07-29 20:45 回复
  18. 有点不明白,楼主能帮帮我不

    紫儿2016-08-04 20:26 回复
  19. 不错,帮到我了!

    在线工具2016-08-15 13:15 回复
  20. 为什么放到CDN就不行了,不放到CDN就可以,Bootstarp的css,这真TM的奇怪!

    在线工具2016-08-15 18:55 回复
    • 已经说的很明白,CDN没有代理文件。除非自建CDN.

      Jophy2016-08-16 17:35 回复
  21. html5.js可以让ie8兼容圆角么

    祁祁2016-08-25 15:18 回复
  22. 人家都说了respond.js在本地是拒绝浏览器访问的。只有在服务器顿才可以兼容IE8不要再烦人家了

    汤峪2016-12-15 18:08 回复
    • 很好,解决了,谢谢作者

      小张2017-01-05 09:42 回复
  23. 请问下是不是解决了自适应问题,BS的兼容问题基本就解决了?

    前端小白2017-01-21 10:11 回复
  24. Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容,这实际上破坏了“锁定”模式
    如果电脑上只有一个ie8,那还会有用吗?

    2017-04-06 14:34 回复
  25. 不生效哦!!!IE8还是不支持媒体查询的,你分享的网站用ie8打开后,内容中心的宽度几乎占了整平,所以.container这个没用上

    951283423@qq.com2017-06-10 16:36 回复
    • 我的也是这个问题 怎么解决啊

      鑫鑫2018-02-07 16:50 回复