IE 浏览器兼容性问题
一、解决 IE9 以下无法支持 input 的 placeholder 的问题
placeholder 是 HTML5 的新属性,可想而知,仅支持 HTML5 的浏览器才支持 placeholder,目前最新的firefox、chrome、safari以及 IE10 都支持,IE6 到 IE9 都不支持。然而PC端页面也常常需要用到这个属性,效果表现为当 input 或者 textarea 设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。
- 新建 js 文件如下,引入 html 文件中
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></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, paddingLeft:paddingleft, lineHeight:(h-18)+'px', color:'#999',fontSize:'14px'}).appendTo(self.parent());
self.focusin(function(e) {
holder.hide();
$(this).css('background','#ebf3f7')
$(this).css('border','1px solid #666')
}).focusout(function(e) {
if(!self.val()){
holder.show();
$(this).css('background','#fff')
$(this).css('border','1px solid #666')
}
});
holder.click(function(e) {
holder.hide();
self.focus();
});
});
}
};
//执行
jQuery(function(){
JPlaceHolder.init();
});
二、解决 IE9 以下无法支持 CSS3 的问题
- 在html文件中引入IE if注释判断,如下;
<!--[if gte IE 7]>
<link rel="stylesheet" href="css/iefix.css" />
<![endif]-->
- 编写iefix.css文件如下:
.login-btn {
position: relative;
behavior: url("PIE.htc");
}
- 下载 PIE.htc 文件将它放到 html 的同级目录——下载 PIE.htc
兼容 IE7 / IE8 遇到问题小结
当浏览器缩小时出现滚动条,同时右边出现留白部分:是由于父元素设置了 width = 100%,当浏览器窗口缩小时,父元素的宽度小于子元素的固定宽度,所以出现了留白;解决办法:给父元素设置min-width为子元素的宽度( min-width 属性 IE7 + 浏览器都支持)
IE7 中 margin-top 失效:(1)用 padding 代替 margin; (2) 在它们中间插入一个空标签实现占位。(因为 HTML 语义化要尽可能少的使用无语义的标签,所以解决问题的过程中并没有使用这种方法)