我所遇到的bootstrap兼容IE的一些问题。
第一部分
问题1.<!DOCTYPE html>
问题2. respond.min.js,html5shiv.min.js
需要引入此两个JS文件,下面的js链接目前可以访问,各位测试时用用,最好是下载下来
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Mainly scripts -->
注意:这两个JS文件不可以用本地形式访问,比如(file://或@import),所以需要各位测试时把项目放置在tomcat服务器中进行网络访问。
问题3.使用meta标签调节浏览器的渲染方式
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<![endif]-->
具体原理请看原著出处: http://blog.csdn.net/chenhongwu666/article/details/41513901
问题4..IE8不支持container的几个属性
IE8不完全支持box-sizing:border-box与min-width, max-width, min-height或max-height的一起使用
对于这个问题,很多帖子都有提到,但是都没有给出具体的解决方案,本人试了试,方法很简单
位置偏移了你就加点margin或者padding,宽高异常了,你就直接设个固定宽高,记得加上 !important
比如:margin-top:14px !important; !important的作用是可以保证你的这个样式不会被其他后来样式冲掉。
问题5.IE支持placeholder的方法
var JPlaceHolder = {
//检测
_check : function(){
return 'placeholder' in document.createElement('input');
},
//初始化
init : function(){
if(!this._check()){
this.fix();
}
},
//修复
fix : function(){
jQuery(':input[placeholder]').each(function(index, element) {
var self = $(this), txt = self.attr('placeholder');
self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
var holder = $('<span id="top-serach-tip"></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());
self.focusin(function(e) {
holder.hide();
}).focusout(function(e) {
if(!self.val()){
holder.show();
}
});
holder.click(function(e) {
holder.hide();
self.focus();
});
if(self.val()){//判断是否已经有值,如果有,就隐藏输入提示
holder.hide();
}
});
}
};
//执行
jQuery(function(){
JPlaceHolder.init();
});
以上代码各位只需要复制到新的JS文件并引用即可。
问题6. IE不支持圆角问题
.modal-content/*-----------------------------解决modal_window.html 弹出层正方显示样式*/
{
z-index:10;
position:relative;
border-radius:6px;
behavior:url(js/pie/PIE.htc);
}
css3-container/*-----------------------------解决通过pie.js设置圆角后 index过高 遮盖内容问题*/
{
z-index:9 !important;
}
z-index的值,只需要比被pie.js样式修饰的元素 低即可。比如我上面写的是10,这里我用9就好。
使用pie.js可能还带来一个问题
鼠标悬浮内容闪烁这个问题,解决方案如下,这段不要照搬代码,看懂原理
.btn-group css3-container,.notes css3-container{/*-----------------------------解决通过pie.js设置的圆角、阴影 index 不合理 内容闪烁问题*/
z-index:auto !important;// btn-group,notes,是我用来限定元素的,你们不要照搬。自己看懂。只要对被修饰元素加上这段代码就好。
}
问题7.bootstrap使用了IE不支持的字体。
bootstrap中使用了很多种字体。