因公司项目需求,需要使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的问题
作者:若年
链接:https://www.jianshu.com/p/9f4c0c71955f
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。