Bootstrap3兼容IE8

原创 2017年01月02日 21:30:36

在使用Bootstarp3的时候,发现在IE8上面的支持并不好,其中使用的H5标签与响应式布局IE8是不支持的,看个例子:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>任务管理</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
    </head>

    <body>
        <form id="searchForm" class="form-horizontal" role="form" method="POST">
            <div class="form-group">
                <label class="control-label col-md-1 col-sm-1" for="bootstrapFormField2">任务名称:</label>
                <div class="col-md-3 col-sm-2">
                    <input class="form-control" id="bootstrapFormField2" name="taskName">
                </div>
                <label class="control-label col-md-1 col-sm-1" for="bootstrapFormField3">责任人:</label>
                <div class="col-md-3 col-sm-2">
                    <select class="form-control" id="bootstrapFormField3" name="worker">
                        <option value="">--不限--</option>
                    </select>
                </div>
                <label class="control-label col-md-1 col-sm-1" for="bootstrapFormField4">状态:</label>
                <div class="col-md-3 col-sm-2">
                    <select class="form-control" id="bootstrapFormField4" name="status">
                        <option value="">--不限--</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-12 col-sm-2">
                    <div style="text-align:center"><button type="button" class="btn btn-default btn-primary">查询</button></div>
                </div>
            </div>
        </form>
    </body>

</html>

在IE8下面运行的效果如下:

这里写图片描述

这显然不是我们想要的效果,网上面有很多的文章介绍了如何解决这个问题,但是我发现写的都好像啊,为什么会有这样的结果,呵呵。,这里我只介绍我在实际过程中的解决方法,亲测可用。

第一步,将Bootstrap3的样式表写在前面,即按照上面的代码中的位置不需要改变。
第二步,分别下载html5shiv.min.js和respond.min.js文件,这两个分别用来让IE支持H5标签与响应式布局,可以点击html5shivrespond访问主页。
第三步,将下载的两个js文件使用hack方式添加到页面上,要放在样式表后面,如下:

<link rel="stylesheet" href="css/bootstrap.min.css" />
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

第四步,其实已经没有这一步了,在下面跟上我们需要的js就好了,经过上面的几步之后,我们再来看看效果。

这里写图片描述

这样就可以让我们的IE支持Bootstrap3,效果还是可以的,如果追求更加完美,可以在慢慢的微调。

版权声明:本文为博主原创文章,转载请标明出处。 举报

相关文章推荐

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,fire...

让Bootstrap 3兼容IE8浏览器

看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说。有几个点大家要注意。 1、本地调试需要Web Server(如IIS、Apache,Nginx),单纯地本地打开文件不能看到兼容效果。 ...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法,IE6 IE7 IE8 IE9 IE10 IE11,chrome,firefox,safari,opera,360...

前端热门框架的兼容性

MVVM框架,Avalon.js与avalon.mobile(IE6), KnockoutJS(IE6), AngularJS(IE9), EmberJS(IE8), WinJS(IE9) )

BootStrap3 在IE8下的兼容性问题

最近刚开始看BootStrap3 发现在IE8下有不兼容现象,上网查了一下,解决方法r

bootstrap 兼容ie8 浏览器

今天晚上在玩弄bootstrap的时候,发现在ie8上不兼容(吐槽下,即使是官方的demo,在ie8上,效果也非常差,),原来是不支持媒体查询的缘故,但在项目开发中,ie8肯定得考虑的,找了好久,终于...

bootstrap的栅格布局不支持IE8该如何解决?

用bootstrap的栅格布局在IE8上出现失效的情况,通常有两种解决方式 方法/步骤 方法一:引用第三方js,一个叫respond.js的东西,github上可以搜到 ...

Bootstrap日期和时间表单组件运用兼容ie8

bootstrap-datetimepicker.js支持IE8 3.引入bootstrap.min.js脚本 基本准备就绪,现在开始引入Bootstra
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)