常见的浏览器兼容问题（css、js）

一、css样式的不同浏览器兼容

浏览器	前缀
chrome	-webkit
safari	-webkit
firefox	-moz
IE	-ms
opera	-o

/*代码示例*/
.front {
		-webkit-transform: rotatex(0deg) translatez(25px);
		-moz-transform: rotatex(0deg) translatez(25px);
		-ms-transform: rotatex(0deg) translatez(25px);
		-o-transform: rotatex(0deg) translatez(25px);
		transform: rotatex(0deg) translatez(25px);
			}

二、js常见各种场景问题的不同浏览器兼容

1.获取事件对象的兼容方式

document.onclick=function(eve){
        var e=eve || window.event;
        console.log(e);
    }

2.事件冒泡的兼容方法

function stopBubble(e){
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;//兼容ie
        }
    }

3.阻止浏览器默认行为的兼容方法

 if( e.preventDefault ){
        e.preventDefault();
    }else{
        window.event.returnValue = false;//ie
    }

4.监听事件的设置和移除的兼容方式

// obj为dom对象 inci为事件名称 比如click back为回调函数
// attachEvent 是老版本浏览器使用的添加事件的方法，现在统一使用addEventListener
function addEvent(obj,inci,back){
        if(obj.addEventListener){
            obj.addEventListener(inci,back);
        }else if(obj.attachEvent){
            obj.attachEvent("on" + inci,back);
        }else{
            obj["on"+inci] = back;
        }
    }
// obj为dom对象 inci为事件名称 比如click back为回调函数
function removeEvent(obj,inci,back){
        if(obj.removeEventListener){
            obj.removeEventListener(inci,back,false);
        }else if(obj.detachEvent){
            obj.detachEvent("on" + inci,back);
        }else{
            obj["on"+inci] = null;
        }
    }

5.键盘事件的key值

// ie浏览器使用window.event.which
var eve = eve || window.event;
var keyC = eve.keyCode || eve.which;

6.时间格式

尽可能采用 YYYY/MM/DD HH:mm:ss
因为safari浏览器只支持YYYY/MM/DD HH:mm:ss这种格式，不支持YYYY-MM-DD HH:mm:ss

 "2016-06-10 12:00:00".split('-').join('/')

7.获取滚动条高度

function onscroll(){
    const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    return scrollTop 
}

8.innerText的问题

问题说明：innerText在IE中能正常工作，但是innerText在FireFox中却不行。
解决方法：在非IE浏览器中使用textContent代替innerText。

function setInnerText(dom,text) {
	if(navigator.appName.indexOf("Explorer") >-1){ 
		dom.innerText = text; 
	} else{ 
		dom.textContent = text; 
	}
}

9.尽量不使用setAttribute()

用setAttribute设置style和onclick这些属性，在IE中是行不通的。为达到兼容各种浏览器的效果，可以用点符号法来设置Element的对象属性、集合属性和事件属性。

const dom = document.getElementById('element');
dom.style.color = "#00f";

10.设置类名

function AddClass(vName) {
	element.setAttribute("class", vName);
	element.setAttribute("className", vName); //for IE
}

11.event.x与event.y问题

问题说明：IE下，even对象有x、y属性，但是没有pageX、pageY属性；Firefox下，even对象有pageX、pageY属性，但是没有x、y属性。

var myX = event.x ? event.x : event.pageX; 
var myY = event.y ? event.y : event.pageY;

12.获取dom父元素

在IE下，使用 obj.parentElement 或 obj.parentNode 访问obj的父结点；在firefox下，使用 obj.parentNode 访问obj的父结点。

const children = document.getElementsByClassName('children')[0];
const parent = children.parentNode

13.访问、设置剪切板中的数据

要访问剪切板中的数据，可以使用clipboardData对象：IE中，这个对象是window对象的属性；而在Firefox，Chrome，Safar中，这个对象是event对象的属性。

const setClipboardText = function (event, value) {
  if (event.clipboardData) {
    return event.clipboardData.setData("text/plain", value);
  } else if (window.clipboardData) {
    return window.clipboardData.setData("text", value);
  }
};

const getClipboardText = function (event) {
  const clipboardData = event.clipboardData || window.clipboardData;
  return clipboardData.getData("text");
};