作为前端尤其是经常接触pc端的，必不可少的要考虑各个浏览器的兼容问题，一直以来也碰到并解决了不少前端问题，最近抽时间整理了下，将自己碰到并验证过的兼容问题和解决方法总结如下：
1.解决IE6兼容:hover,:focus,:active问题
在ie6 下只有a 才支持:hover 伪类，其它标签都不支持，最简单的方法是可以给当前的div或者li里面加一个a标签。
如果要使用li:hover或div：hover等，需引用一个文件使其兼容：csshover.htc
下载好后，只需在代码的<head></head>中间添加下面这段代码，然后就可以去使用hover吧,也支持focus、active伪类：
<!--[if lte IE 6]>
<style type="text/css">
body { behavior:url("css/csshover.htc"); }
</style>
<![endif]-->
注意
在引用 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);
时间： 2024-09-30 04:15:22