常见浏览器的兼容问题(一)

　　作为前端尤其是经常接触pc端的，必不可少的要考虑各个浏览器的兼容问题，一直以来也碰到并解决了不少前端问题，最近抽时间整理了下，将自己碰到并验证过的兼容问题和解决方法总结如下：

1.解决IE6兼容:hover,:focus,:active问题

在ie6 下只有a 才支持:hover 伪类，其它标签都不支持，最简单的方法是可以给当前的div或者li里面加一个a标签。

如果要使用li:hover或div：hover等，需引用一个文件使其兼容：csshover.htc

下载好后，只需在代码的<head></head>中间添加下面这段代码，然后就可以去使用hover吧,也支持focus、active伪类：

注意
在引用 csshover.htc 时，不管你是在 css 文件里面引用 htc 文件，还是 html 里面引用 htc 文件，都是 html 文件去找 htc 的路径。也就是说路径一定要相对根目录或用绝对路径。

2.IE如何兼容html5的placeholder属性

直接把代码复制下来,保存成一个js文件引用即可，不用再做任何处理

$(document).ready(function(){   
   var doc=document,
    inputs=doc.getElementsByTagName('input'),
    supportPlaceholder='placeholder'in doc.createElement('input'),
    
    placeholder=function(input){
     var text=input.getAttribute('placeholder'),
     defaultValue=input.defaultValue;
     if(defaultValue==''){
        input.value=text
     }
     input.onfocus=function(){
        if(input.value===text)
        {
            this.value=''
        }
      };
     input.onblur=function(){
        if(input.value===''){
            this.value=text
        }
      }
  };
  
  if(!supportPlaceholder){
     for(var i=0,len=inputs.length;i<len;i++){
          var input=inputs[i],
          text=input.getAttribute('placeholder');
          if(input.type==='text'&&text){
             placeholder(input)
          }
      }
  }
 });

3.解决IE浏览器部分版本不支持background-size属性问题

方法1：在样式中添加以下代码

例如自己本地的可以这样写：

background-image: url('file:///D:/doing/20151104chunzhenpc/img/video-bg.jpg');
background-size: cover;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///D:/doing/20151104chunzhenpc/img/video-bg.jpg',  sizingMethod='scale');

方法2：

引用backgroundsize.htc或者backgroundsize.min.htc

添加方法如下：

background: url(images/126.jpg) center no-repeat;
background-size: cover;
-ms-behavior: url(css/backgroundsize.min.htc);
behavior: url(css/backgroundsize.min.htc);