菜单

Bootstrap 3支持IE 8遇到的一个多少题目

2018年11月15日 - Bootstrap

使用Bootstrap完成web的UI后,在IE
8运行时,发现.container等class的签的之宽并不曾依预期的增幅显示,本人已经根据bootstrap官方说明 http://getbootstrap.com/getting-started/\#support,增加引入repond.js,

http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html

看看就首文章有越多之丁拘禁,我操于大家节省时间,废话少说。有几个点大家如果注意。

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就可了。

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link media="screen"
    href="/themes/theme.css" rel="stylesheet" />

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
   <script src="/js/html5shiv.js"></script>
   <script src="/js/respond.min.js"></script>
<![endif]-->

今天休多介绍Bootstrap的力量,以后发生机遇可主要介绍一下,确实特别优。响应式布局,定制性强,组件丰富,与Jquery完美契合。

细心核对过不错显示的Bootstrap Example,无论如何要不能够科学显示,因IE
8不支持css @media ,也就是说respond.js并未对运行修改css。

进去正题,说说Bootstrap 3的兼容IE8问题。

  
几由此折磨后,才恍然想起,是否theme.css里@import 的bootstrap.css有问题,立刻改为如下:

Bootstrap是一个响应式的布局,你得在宽屏电脑、普通电脑,平板电脑,手机及还收获那个好的布局体验。这种响应式的布局正是经过CSS3的媒体询问(Media
Query)功能实现之,根据不同之分辨率来配合不同的体。IE8浏览器并无支持这无异于不错的Css3特性,Bootstrap在支付文档中描写了怎么下进行兼容IE8。但是笔者多次尝没有得逞,IE8的布局是胡之。直到今天忍无可忍,决定再品尝一下,最终获得成功。有些细节尚未放在心上到,导致IE8没法响应式布局。

 

脚教下怎么吃Bootstrap 3兼职容IE8浏览器,至于有人会问我争兼容IE6
IE7,请绕道搜索bsie (bootstrap2)。

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link media="screen"
    href="/themes/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet" />
<link media="screen"
    href="/themes/bootstrap/3.0.3/css/bootstrap-theme.css"
    rel="stylesheet" />
<link media="screen"
    href="/themes/theme.css" rel="stylesheet" />

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
   <script src="/js/html5shiv.js"></script>
   <script src="/js/respond.min.js"></script>
<![endif]-->

Bootstrap在IE8中肯定不如Chrome、Firefox、IE11那到,部分零件不包完全匹配,还是如Hack的。这里不说话。

随则运行,整个页面在IE8下终于对显示。问题迎刃而解了,那反过来应该再次细致翻看Bootstrap文档,悲催的意识有如下描述有在Getting
started里:

1、使用html5文档声明

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

 

 

 

 

 

 

XHTML

 

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

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
 
</body>
</html>

 

Respond.js and @import

Respond.js doesn’t work with CSS that’s referenced via @import. In
particular, some Drupal configurations are known to use @import. See
the Respond.js docs for details.

据此,吸取教训,读书要认真,认真了能够望多时刻… …

 

 

http://getbootstrap.com/ bootstrap官网
http://v3.bootcss.com/css/ bootstrap学习
http://www.runoob.com/ 前端教程

 


2、加入meta标签

前端定义媒体询问,后者确定显示是网页的IE版本。

 

 

 

 

 

 

XHTML

 

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

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

 

3、引入bootstrap文件

即步十分要,这里要扣君是援引其他网站(CDN)的bootstrap文件或者拿Bootstrap文件放本地。
这里我放在地面,因为后的安排比较简单。

 

 

 

 

 

 

 

XHTML

 

<link rel=”stylesheet” >

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

 

4、引入respond.js 和 html5.js

respond.js(Github)是用于媒体询问的,项目征描述:要与要展开媒体询问的文本在同一域中。不然CDN部署之需改变一些摘取,之后再说。

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

 

 

 

 

 

 

XHTML

 

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

1
2
3
4
<!–[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基本没人来这种操作权限。

此后再行补充加代码。

 

 

 

 

 

 

 

XHTML

 

<!– Respond.js proxy on external server –> <link
id=”respond-proxy” rel=”respond-proxy” /> <!– Respond.js redirect
location on local server –> <link id=”respond-redirect”
rel=”respond-redirect” /> <!– Respond.js proxy script on local
server –> <script
src=”/path/to/respond.proxy.js”></script>

1
2
3
4
5
6
7
8
<!– 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库。

 

 

 

 

 

 

XHTML

 

<script
src=”http://libs.baidu.com/jquery/1.10.2/jquery.js"&gt;&lt;/script&gt;

1
<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。

懒人代码总结如下:

 

 

 

 

 

 

XHTML

 

<!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” > <link rel=”stylesheet” >
<!–[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"&gt;&lt;/script&gt;
<script src=”bootstrap/js/bootstrap.min.js”></script>
</head> <body> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>

 


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图