整理一些前端浏览器兼容问题以及解决方案

0、H5新标签在IE9以下的浏览器识别

<!--[if lt IE 9]>
 <script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->

1、不同浏览器的标签默认的外margin 和内padding不同

解决方案： css 里增加通配符 * { margin: 0; padding: 0; }

2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题

解决方案：设置display:inline;

3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度

解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

4、图片默认有间距

解决方案：将img显示设置成display:block;float: left;

5、IE9一下浏览器不能使用opacity

//解决方案
opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；

解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

7、cursor:hand 显示手型在safari 上不支持

解决方案：统一使用 cursor:pointer

8、innerText兼容性问题，在火狐中不支持该属性

//解决方法 需用textContent
// 处理innerText的兼容性问题
function getInnerText(element) {
	// 判断当前浏览器是否支持元素的innerText属性，支持innerText使用element.innerText获取内容
	// 如果不支持innerText属性，使用element.textContent获取内容
	if(typeof element.innerText ==='string') {
		return element.innerText;
	} else {
	return element.textContent
	}
} 

9、万能清除浮动

.clearfix:after { 
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden; 
} 

10、超链接访问过后hover样式就不出现的问题

解决方案

• a:link {}
• a:visited {}
• a:hover {}
• a:active {}

11、页面的最大、小宽度

IE不认得这个min-width、max-width

min-width:320px;
width:expression_r(document.body.clientWidth < 320 ? "320px": "auto" );
max-width:750px;
width:expression_r(document.body.clientWidth > 750 ? "750px": "auto" );

12、td高度的问题,table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度

解决：设置line-height和height一样。在ie中如果td中的没有内容，那么border将不会显示

13、IE6两个层之间3px的问题

左边层采用浮动，右边没有采用浮动，这时在ie6中两层之间就会产生3像素的间距

解决：1、右边层也采用浮动 float 2、左边层添加属性 margin-right:-3px;

14、网页可见区域宽、高

var winW = document.body.clientWidth || document.docuemntElement.clientWidth;
var winH = document.body.clientHeight || document.docuemntElement.clientHeight;

15、整个网页的宽、高

var winW = document.body.scrollWidth || document.docuemntElement.scrollWidth;
var winH = document.body.scrollHeight || document.docuemntElement.scrollHeight;

16、网页被卷去的高、网页左卷的距离

var scrollHeight = document.body.scrollTop || document.docuemntElement.scrollTop;//网页被卷去的高
var scrollLeft = document.body.scrollLeft || document.docuemntElement.scrollLeft;//网页左卷的距离

17、event事件对象的兼容问题

document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；
    var e=ev;
    console.log(e);
}
document.onclick=function(){//谷歌和IE支持，火狐不支持；
    var e=event;
    console.log(e);
}

//解决办法
document.onclick=function(ev){//兼容写法；
    var e=ev||window.event;
}

18、事件冒泡的兼容问题

IE浏览器： eve.cancelBubble = true;
其他浏览器：eve.stopPropagation();

//解决办法
function stopBubbles(e){
    if(e.stopPropagation){
        //针对非ie浏览器
        e.stopPropagation();
    }else{
        //针对ie浏览器
        e.cancelBubbles = true;
    }
} 

19、阻止浏览器默认行为的兼容问题

IE浏览器： window.event.returnValue = false;
其他浏览器：e.preventDefault();

//解决办法
if( e.preventDefault ){
    //针对非ie浏览器阻止浏览器行为
    e.preventDefault();
}else{
    //针对ie浏览器  IE中阻止浏览器行为 
    window.event.returnValue = false;
}

20、事件委托的兼容问题

IE浏览器： e.srcElement;
其他浏览器： e.target;

//解决办法
dom.onclick = function(eve){
    var e = eve || window.event;
    var target = e.target || e.srcElement;
    if(target.nodeName == "LI"){
        console.log(target.innerHTML);
    }
}

21、键盘事件获取的兼容问题

IE浏览器: event.which
其他浏览器 : event.keycode

//解决办法
function code(eve){
    var e=eve||window.event;
    var code=e.keyCode||e.which;
}

22、DOM节点相关的问题 主要兼容IE 6 7 8

function nextnode(obj){//获取下一个兄弟节点
    if (obj.nextElementSibling) {
        return obj.nextElementSibling;
    } else{
        return obj.nextSibling;
    };
}
function prenode(obj){//获取上一个兄弟节点
    if (obj.previousElementSibling) {
        return obj.previousElementSibling;
    } else{
        return obj.previousSibling;
    };
}
function firstnode(obj){//获取第一个子节点
    if (obj.firstElementChild) {
        return obj.firstElementChild;//非IE678支持
    } else{
        return obj.firstChild;//IE678支持
    };
}
function lastnode(obj){//获取最后一个子节点
    if (obj.lastElementChild) {
        return obj.lastElementChild;//非IE678支持
    } else{
        return obj.lastChild;//IE678支持
    };
}

23、标准的事件绑定方法函数为addEventListener，但IE下是attachEvent

function addEvent(obj,oEvn,fn){
    if(obj.addEventListener){
        obj.addEventListener(oEvn,fn,false);
    }else{
        obj.attachEvent('on'+oEvn,fn);
    }
}