蒋固金(jianggujin)的专栏

骨宜刚、气宜柔、志宜大、胆宜小、心宜虚、言宜实、慧宜增、福宜惜、虑不远、忧亦近...

Bootstrap3兼容IE8

在使用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,效果还是可以的,如果追求更加完美,可以在慢慢的微调。

阅读更多

扫码向博主提问

去开通我的Chat快问

jianggujin

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • java
  • oracle
  • js
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/jianggujin/article/details/53982361
个人分类: HTML
想对作者说点什么? 我来说一句

解决bootstrap 3 IE8兼容性问题

2015年06月11日 10KB 下载

没有更多推荐了,返回首页

不良信息举报

Bootstrap3兼容IE8

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭