ie兼容问题

js兼容问题

1 阻止事件冒泡：

//js阻止事件传播，这里使用click事件为例
document.onclick=function(e){
    var e=e||window.event;
    if (e.stopPropagation) {
        e.stopPropagation();//W3C标准
    }else{
        e.cancelBubble=true;//IE....
    }
}

2 阻止默认事件：

//js阻止默认事件
document.onclick=function(e){
    var e=e||window.event;
    if (e.preventDefault) {
        e.preventDefault();//W3C标准
    }else{
        e.returnValue='false';//IE..
    }
}

3 获取事件的目标元素：

//关于event事件中的target
document.onmouseover=function(e){
    var e=e||window.event;
    var Target=e.target||e.srcElement;  //srcElement兼容IE
}

4 获取dom元素：

obj.firstElementChild;   //非IE678支持
obj.firstChild;   //IE678支持

obj.lastElementChild;   //非IE678支持
obj.lastChild;   //IE678支持

5 获取类名：

document.getElementsByClassName('');   // IE 6 7 8不支持

//第一个为全局获取类名，第二个为局部获取类名
function byClass1(oClass){//全局获取，oClass为你想要查找的类名，没有“.”
    var tags=document.all?document.all:document.getElementsByTagName('*');
    var arr=[];
    for (var i = 0; i < tags.length; i++) {
        var reg=new RegExp('\\b'+oClass+'\\b','g');
        if (reg.test(tags[i].className)) {
            arr.push(tags[i]);
        };
    };
    return arr;//注意返回的也是数组，包含你传入的class所有元素；
}

// 支持IE 6 7 8
function byClass2(parentID,oClass){// 局部获取类名，parentID为你传入的父级ID
    var parent=document.getElementById(parentID);
    var tags=parent.all?parent.all:parent.getElementsByTagName('*');
    var arr=[];
    for (var i = 0; i < tags.length; i++) {
    var reg=new RegExp('\\b'+oClass+'\\b','g');
        if (reg.test(tags[i].className)) {
            arr.push(tags[i]);
        };
    };
    return arr;//注意返回的也是数组，包含你传入的class所有元素；
}

6 监听事件

obj.addEventListener('click', fn, false);   // 非IE
obj.attachEvent('onclick', fn);   // IE

obj.removeEventListener('click', fn, false);   // 非IE
obj.detachEvent('onclick', fn);   //  IE

7 新建异步对象

new XMLHttpRequest();  // 其他浏览器
new ActiveXObject("Microsoft.XMLHTTP");   // ie

css兼容问题

 1  盒模型

标准盒模型的内容大小就是content的大小，而ie盒模型的大小则是content+padding+border总的大小

2 ie8不兼容透明度

filter:alpha(opacity=50);
opacity:0.5;

3  不兼容border-radius

4 不兼容transform

HTML兼容问题

1 placeholder是HTML5<input>的属性之一，非现代浏览器( 例如 IE6-IE9 )是不支持placeholder属性的

//判断浏览器是否支持placeholder属性
supportPlaceholder='placeholder'indocument.createElement('input');

//当浏览器不支持placeholder属性时
if(!supportPlaceholder){
    $('input').each(function(){
      text = $(this).attr("placeholder");
      if($(this).attr("type") == "text"){
        // 设置placeholder逻辑以及样式
      }
    });
}

2 ie8不兼容html5的新标签

<header>定义页面或区段的头部；
<footer>定义页面或区段的尾部；
<nav>定义页面或区段的导航区域；
<section>页面的逻辑区域或内容组合；
<article>定义正文或一篇完整的内容；
<aside>定义补充或相关内容；

 

 

原文：https://www.cnblogs.com/duenyang/p/6066737.html