浏览器兼容性问题

 浏览器常用的前缀有：

• -moz代表firefox浏览器私有属性
• -ms代表IE浏览器私有属性
• -webkit代表chrome、safari私有属性
• -o代表opera私有属性

一、html部分

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

<!--[if lt IE 9]>

 <script type="text/javascript" src="js/html5shiv.js"></script>

<![endif]-->

 html5shiv.js下载地址

https://github.com/aFarkas/html5shiv/releases

 

二、CSS样式的兼容性

css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同  IE的条件注释hack：  <!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->            <!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->

常见CSS属性兼容

• inline-block: >=ie8
• min-width/min-height: >=ie7
• :before,:after: >=ie8
• div:hover: >=ie7
• inline-block: >=ie8
• background-size: >=ie9
• 圆角: >= ie9
• 阴影: >= ie9
• 动画/渐变: >= ie10

list-style-image准确定位的问题

问题：

       li前设置图片时，图片与其后的文字对齐问题

解决：

1、采用背景定位 和 字符缩进的方法

background:url() no-repeat left center;text-index:16px;

2、采用相对定位方法

li 设置list-style:url();

li的子元素position:relative;top:-5px;

  

单选框、复选框与后面的文字对不齐

问题：

     单选框、复选框与后面的文字对不齐。

解决：

.align{font-size:12px;}

.align input{ display:block; float:left;}

.align label{ display:block; float:left;padding-top:3px; *padding-top:5px;}

图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（有人使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以尽量不要使用）

标签最低高度设置min-height不兼容

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-h

eight:200px; height:auto !important; height:200px; overflow:visible;}

备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。  

li中内容超过长度后以省略号显示

此技巧适用与IE、Opera、safari、chrom浏览器，FF暂不支持。

<style type="text/css">
li { 
200px; 
white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden; 
}

为什么无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多：

例如:overflow:hidden　 zoom:0.08 　line-height:1px 

chrome浏览器下不支持字体小于12像素

通过-webkit-text-size-adjust: none;来解决

字体大小定义不同

问题表现：对字体大小small定义不同，Firefox为13px，而IE为16px，差别比较大

解决方法：使用指定的字体大小如14px或者使用em

常见的兼容性问题？

不同浏览器的标签默认的margin和padding不一样。 *{margin:0;padding:0;}

渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 {background-color:#f1ee18;/*所有识别*/.background-color:#00deff9; /*IE6、7、8识别*/+background-color:#a200ff;/*IE6、7识别*/_background-color:#1e0bd1;/*IE6识别*/}

设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

三、JavaScript的兼容性

事件绑定方法函数不同：标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；

事件的捕获方式不一致：标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准window.event获取的；

获取目标元素的方法不同：标准浏览器是event.target，而IE下是event.srcElement

ajax的实现方式不同：这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject 

获得DOM节点的父节点、子节点的方式不同： 其他浏览器：parentNode  parentNode.childNodes   IE：parentElement parentElement.children

鼠标坐标：e.pageX, e.pageY VS window.event.x, window.event.y

原生ajax中低版本ie不支持xmlhttprequest对象

解决方法是做一个判断，如果有xmlhttprequest方法，则调用，若没有，则改用ie浏览器的ActiveXobject方法：

if(window.XMLHttpRequest){
  var oAjax=window.XMLHttpRequest
}else{
  var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
} 

低版本浏览器不支持getElementByClassName

解决方法是重写一个getByClass()函数：

function getByClass(obj,sClass){
    var aResult = [];
    if(obj.getElementsByClassName){
        aResult = obj.getElementsByClassName(sClass);
    }else{
        var aEle = obj.getElementsByTagName('*');
        for(var i=0;i<aEle.length;i++){
            var aClass = aEle[i].className.split(' ');
            if(findInArr(aClass,sClass)){   //调用自定义的findArr方法
                aResult.push(aEle[i]);
            }
        }
    }
    return aResult;
}
function findInArr(arr,sClass){
    for(var i=0;i<arr.length;i++){
        if(arr[i]==sClass){
            return true;
        }
    }
    return false;
}