浏览器兼容性问题

 浏览器经常使用的前缀有：

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

 

1、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

 

2、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前设置图片时，图片与其后的文字对齐问题

解决：

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

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

二、采用相对定位方法

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 { 
width: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和IE七、IE6分离开来，这样IE8已经独立识别。 {background-color:#f1ee18;/*全部识别*/.background-color:#00deff\9; /*IE六、七、8识别*/+background-color:#a200ff;/*IE六、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 {}

 

3、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; }