文档章节

让Bootstrap 3兼容IE8浏览器

次长风
 次长风
发布于 2015/07/31 10:19
字数 1284
阅读 238
收藏 11

让Bootstrap 3兼容IE8浏览器

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

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浏览器

次长风
粉丝 0
博文 5
码字总数 675
作品 0
北京
后端工程师
私信 提问
加载中

评论(1)

bootstrap兼容ie8以下版本

由于bootstrap用到了css3+html5 并且ie8以下的浏览器不支持css3和html5。很多公司现在都市ie8以下的浏览器不用兼容的,但是也有好多地方需要兼容。遇到这样的问题很好解决,只需将下面这段代...

好名字都被猪用了
2015/09/08
104
0
浅谈Bootstrap如何支持IE8

去年底自己从大公司跳出来,跟一个哥们创业,也拾起了多年没有碰的coding和eclipse。没想到技术演化的这么快,之前都是J2EE,现在PHP已经在Web端很流行了。 做开发的都知道,UI, UE是我们的最...

圣西罗南看台
2013/06/09
52.7K
26
Bootstrap vs Foundation如何选择靠谱前端框架

现在 OurJS开源网站有两套前端模板了,分别基于 Foundation5 和 Bootstrap2.2 (最近已经提交到 Github上)。 经过一段时间使用,对于二者有一些粗略的了解,关于具体的比较细节,可以参考 这...

Kris_zcl
2014/09/21
10.8K
3
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在 chrome,firefox,safari,opera,360浏览器(极速模式)、搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样...

JackFace
2015/11/13
324
0
基于bootstrap完成响应式布局(提供PSD源文件)

一个网站,已经全部设计完成。由于人手原因,需要将前端工作外包出来,具体要求如下: 1、基于bootstrap完成响应式布局,要求兼容ie8及以上浏览器 2、手机端浏览器需要做到响应式显示 3、因时...

泽惠方惠
2016/10/31
24
0

没有更多内容

加载失败,请刷新页面

加载更多

kibana汉化

kibana5 / 6 需要下载补丁包,https://github.com/anbai-inc/Kibana_Hanization 其中 v6 版本原生支持国际化,只需要添加资源文件并且配置即可 kibana7 v7版本官方内置汉化资源,在配置文件 ...

细肉云吞
6分钟前
0
0
spring boot 自定义日志 log4j2

使用默认的日志在实际开发中会存在很多问题,比如备份文件名称无法自动重命名、各个等级的日志被放在一个文件中等,所以实际开发中为了更好满足我们的需求,我们一般都会自定义采用配置的方式...

雷开你的门
10分钟前
1
0
PCB设计-Allegro软件入门系列-设计参数配置(上)

前言 经历了导入网表,和放置器件后,我们就要画板子了,但是必要的设计参数也要先准备好,磨刀不误砍柴工。 《一》显示参数 这里主要设置DRC报错标志大小和飞线显示类型 (1)DRC标志可以适当...

demyar
11分钟前
2
0
js实现微博、微信分享

html <!-- 分享 --><div class="share-box"> <b style="vertical-align: middle;">分享到:</b> <a title="分享到新浪微博" class="shareSina"><span class="share-icon"></span><......

张兴华ZHero
27分钟前
2
0
创龙TMS320DM8168浮点DSP C674x + ARM Cortex-A8的CPU、NAND FLASH、NOR FLASH

TL6678-EasyEVM是广州创龙基于SOM-TL6678核心板而研发的一款多核高性能DSP开发板。开发板采用核心板+底板方式,底板采用沉金无铅工艺的四层板设计,尺寸为200mm*106.65mm,它为用户提供了SOM...

Tronlong创龙
30分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部