浏览器兼容性问题

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-)+'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" target="_blank" rel="external nofollow"  />  
  <![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 语义化要尽可能少的使用无语义的标签，所以解决问题的过程中并没有使用这种方法)