我所遇到的bootstrap3.3.4兼容IE的一些问题。

来源：互联网发布：淘宝联盟高佣链接编辑：程序博客网时间：2024/06/06 01:07

我所遇到的bootstrap兼容IE的一些问题。

我是一个公司新人，最近在公司修改bootstrap3.34框架搭建的前台页面，通过网上搜索，解决了一部分问题，但是还有很多的小问题，很多博客或者帖子都没点出来，在此我

说说我在bootstrap在兼容IE时遇到的问题。

第一部分

部分为转载网上的部分问题的解决方案。简单贴出来下。但是部分问题需要改善下。

原著请挪步 http://blog.csdn.net/chenhongwu666/article/details/41513901

问题1.<!DOCTYPE html>

需要在HTML页面首行键入：<!DOCTYPE html>

有人说<!DOCTYPE html> 这里有空格也不行，要去掉空格(具体的我没试验)。

问题2. respond.min.js，html5shiv.min.js

需要引入此两个JS文件，下面的js链接目前可以访问，各位测试时用用，最好是下载下来



注意：这两个JS文件不可以用本地形式访问，比如（file://或@import），所以需要各位测试时把项目放置在tomcat服务器中进行网络访问。

问题3.使用meta标签调节浏览器的渲染方式

具体原理请看原著出处： 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的方法

IE8不支持 placeholder( input的输入提示)，按照 http://blog.csdn.net/chenhongwu666/article/details/41513901这里边的方案并不能解决

问题，我找了其他方法http://www.oschina.net/code/snippet_206691_26471

这个JS文件最终还是有点小问题(如下图)

如果一个input标签再加载时有value的值，此时就会值与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不支持圆角问题

bootstrap中有大量使用阴影和圆角效果，我修改的网页必须保持风格统一，按钮边框都要求圆角。

解决方案是使用 pie.htc这个文件(稍后会上传资源)，

pei.htc原理

使用方法：

.modal-content/*-----------------------------解决modal_window.html 弹出层正方显示样式*/{    z-index:10;    position:relative;    border-radius:6px;    behavior:url(js/pie/PIE.htc);}

按照以上代码使用想要的效果是这样的。

但是出来的可能是这样的。

解决方法是在CSS文件的最后(一定要放在最后)加上一下代码：

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,是我用来限定元素的，你们不要照搬。自己看懂。只要对被修饰元素加上这段代码就好。}

对被修饰的元素再加上 z-index: auto !important; 注意：这个样式只需要放在有闪烁问题的元素上就好，不要对所有的 css3-container元素设置。