兼容性问题总结

浏览器兼容性：指网页在各种浏览器上的显示效果不一致。或者是一些属性和方法在低版本的浏览器中不支持。

1.通过class来找对象

      document.getElementsByClassName("");

  //参数：类名  字符串

  //返回值：伪数组

  //ie678不兼容(H5新增方法)

2.在原来的类名基础上  添加/删除类名(    IE678不兼容)

   classList.add("");

   classList.remove("");

3.innerText的兼容性问题(防止xss攻击)

　　//1. innerText是IE提出来的属性，因此低版本的火狐浏览器不支持这个属性。

　　//2. 火狐有一个textContent属性，效果跟innerText一样，但是IE678不支持这个属性

　　解决浏览器兼容性的处理方式： 

　　　　1. 能力检测（常用）

　　　　2. 代理检测:判断浏览器的类型与版本 使用麻烦

　　　　3. 怪癖检测:ie678有很多独特的属性（怪癖）  attchEvent

　　　　　　书写innerText的兼容性代码 

　　　　　

　//获取标签的innerText（兼容所有浏览器）
　　　　function getInnerText(element) {
 　　　　   if (typeof element.innerText === "string") {
 　　　　       return element.innerText;
 　　　　   } else {
 　　　　       return element.textContent;
 　　　　   }
　　　　}
　　　　//设置标签的innerText（兼容所有浏览器）
　　　　function setInnerText(element, value) {
  　　　　  //能力检测
 　　　　   if (typeof element.innerText === "string") {
  　　　　      element.innerText = value;
 　　　　   } else {
 　　　　       element.textContent = value;
 　　　　   }
　　　　}

 

4. 孩子节点,兄弟节点问题   

1. //firstChild //第一个节点
         //firstElementChild //第一个子元素（IE678不兼容）可以封装一个兼容性方法
         children[0];
　　2. //lastChild //最后一个节点
         //lastElementChild //最后一个子元素（IE678不兼容） 可以封装一个兼容性方法
         children[children.length-1]
　　//1. nextSibling:下一个兄弟节点
　　//2. nextElementSibling:下一个兄弟元素（IE678不兼容）
　　//3. previousSibling//上一个兄弟节点
　　//4. previousElementSibling //上一个兄弟元素（IE678不兼容） 有兼容性问题 可以封装一个兼容性方法 

5.不透明度

      /*现代浏览器支持opacity属性*/（IE678不兼容）

      /*opacity: .5;*/

      /*IE678支持filter*/

      /*filter: alpha(opacity = 50);*/

      /*rgba(255,255,255,.3)是C3属性  IE678一样不兼容*/

      /**/

　　解决方法:  两个都写上

  　　 box.style.opacity = ".5";

 　　  box.style.filter = "alpha(opacity=50)";

6.date.toLocalString();//本地风格的日期格式（兼容性问题）

7.现代浏览器：return window.getComputedStyle(element, null)[attr];

             IE678 :return element.currentStyle[attr];

 

　　解决方案:

　　

 function getStyle(element, attr) {
  　　  if (window.getComputedStyle) {
 　　     return window.getComputedStyle(element, null)[attr];
 　　   } else {
 　　     return element.currentStyle[attr];
　　    }
　　  }

 

8.scroll家族( IE678)

　　对于现代浏览器：  window.pageYOffset去获取

　　 对于IE678  document.documentElement.scrollTop 获取

　　解决方案

function getScrollTop() {
 　　   return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
　　  }
 
  　　function getScrollLeft() {
 　　   return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
 　　 }
　　或者
　　function getScroll() {
   　　 return {
   　　   scrollTop:window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
　　      scrollLeft:window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
  　　 }
　　  }
 

 

9.client家族( IE678)

　　

 function getClientWidth() {
  　　  return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
　　  }
 
 　　 function getClientHeight() {
 　　   window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight ||0
　　  }
 

10.注册事件的新方式

　　注册事件的新方式的解决了事件覆盖的问题，但是存在浏览器兼容性问题，因此可以进行兼容性封装

　

　/添加事件
　　function addEvent(element, type, fn){
  　　  //能力检测
 　　   if(element.addEventListener){
　　        element.addEventListener(type, fn, false);
  　　  }else if(element.attachEvent){
   　　     element.attachEvent("on"+type, fn);
  　　  }else {
 　　       //如果都不行，那就用on方式
 　　       element["on"+type] = fn;
　　    }
　　}
    或者　
　　function addEvent(obj,type,handle){ 
　　　　try{ 　　 // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本 
　　　　　　obj.addEventListener(type,handle,false); 
　　　　}catch(e){ 
　　　　　　try{　　 // IE8.0及其以下版本 
　　　　　　　　obj.attachEvent('on' + type,handle); 
　　　　　　}catch(e){ // 早期浏览器 
　　　　　　　　obj['on' + type] = handle; 
　　　　　　} 
　　　　} 
　　}


 
　　//移除事件
　　function removeEvent(element, type, fn) {
 　　   if(element.removeEventListener){
　　        element.removeEventListener(type, fn, false);
　　    }else if(element.detachEvent){
　　       element.detachEvent("on"+type, fn);
　　    }else {
　　        element["on"+type] = null;
　　   }
　　}

 

11.获取事件对象的时候，存在浏览器的兼容问题。

　　兼容性封装

 

　

　btn.onclick = function(event){
　　      //只要用到了事件对象，就要记得处理浏览器兼容性
　　    event = event || window.event;
　　}

 

12.pageX与pageY的兼容性

　　

function getPage(event) {
  　　  return {
  　　        //在IE678中使用document.documentElement.scrollLeft就可以获取到scrollTop的值
   　　     x:event.pageX || event.clientX + document.documentElement.scrollLeft,
   　　     y:event.pageY || event.clientY + document.documentElement.scrollTop
  　　  }
　　}

 

13.阻止事件冒泡有浏览器兼容性问题

　　兼容性处理

 

　

　link.onclick = function (event) {
　　    event = event || window.event;
　　    if(event.stopPropagation){
 　　         event.stopPropagation();
 　　   }else {
　　          event.cancelBubble = true;
　　    }
　　}

1.HTML5语义化标签

　　兼容性处理

　　IE678不识别这个标签 

　　document.createElement("header");//创建这个一个标签即可

　　//创建的标签默认是行内样式。

　　//还需给标签加一个display:block的属性。

　　条件注释是IE独有的注释 css骇客。  IE678  中有很多东西，只有ie678自己能识别

　　  *zoom:1 

　　条件注释    使用html5shiv.js

　　我们每次都要去创建标签，并且还需要设置display：block属性，非常麻烦，因此我们可以引入一个第三方js文件，这个js文件的功能就是创建元素和设　　        置display属性。

　　<!--[if lte IE 8]>

  　　  <script src="js/html5shiv.min.js"></script>

　　<![endif]-->

　　//当ie浏览器的版本小于等于8的时候，才会引入html5shiv.js

　　//css骇客：

　　//命令：cc:ie6

　　//如何获取：github.com

　　<!--[if lt IE 9]>

 　　 如果ie版本小于等于9，这段代码可以识别，如果大于9，就就是一段注释

 　　 l:less

 　　 t:than

 　　 e:equal

 　　 呵呵呵呵

　　<![endif]-->

 

 

2. HTML多媒体 audio   video

<!--浏览器兼容性写法-->
　　<audio autoplay loop id="music">
　　  <source src="music/music.mp3">
　　  <source src="music/music.ogg">
　　  <source src="music/music.wav">
　　  亲，你的浏览器版本太低，请升级
　　</audio>