如何配置bootstrap3兼容到IE8

   因公司项目需求,需要使bootstrap兼容到IE8,下面简单说一下如何设置配置文件,其实挺简单的。

1.bootstrap是依赖jquery的,高版本的jquery已经放弃对IE8的支持,因此,jquery的版本要注意一下,引用低版本的,我这里引用的是1.12.1.

2.引用以下两个文件,html5shiv.js是使IE8支持h5的语法,respond.js让IE6-8支持CSS3 Media Query.

官方网站:https://code.google.com/p/html5shiv/
官方网站:http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js

 <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

3.设置meta标签

 <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
 <meta http-equiv="X-UA-Compatible" content="IE=9" />

4.解决placeholder不生效的问题

<script>
    $(function(){
        if( !('placeholder' in document.createElement('input')) ){
            $('input[placeholder],textarea[placeholder]').each(function(){
                var that = $(this),
                        text= that.attr('placeholder');
                if(that.val()===""){
                    that.val(text).addClass('placeholder');
                }
                that.focus(function(){
                            if(that.val()===text){
                                that.val("").removeClass('placeholder');
                            }
                        })
                        .blur(function(){
                            if(that.val()===""){
                                that.val(text).addClass('placeholder');
                            }
                        })
                        .closest('form').submit(function(){
                    if(that.val() === text){
                        that.val('');
                    }
                });
            });
        }
    });
</script>

至此,基本已经解决boostrap3兼容IE8的问题。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文知识解决了实际开发的问题,所以转载,原文地址:http://www.hustlzp.com/post/2014...
    ddai_Q阅读 5,806评论 7 12
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,879评论 1 45
  • IE8兼容 本文知识解决了实际开发的问题,所以转载,原文地址:http://www.hustlzp.com/pos...
    该昵称注册中阅读 376评论 2 0
  • 1. 什么是 CSS hack 由于不同厂商的浏览器,比如Internet Explorer,Safari,Moz...
    QQQQQCY阅读 245评论 0 0
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,373评论 0 3