Common browser compatibility issues (css, js)

1. CSS styles are compatible with different browsers

Browser	prefix
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);
			}

 2. Compatibility of different browsers with various js common scene problems

1. Compatible way to obtain event object

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

2. Compatible methods of event bubbling

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

3. Compatible methods to prevent browser default behavior

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

4. Compatible methods for setting and removing listening events

// 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 value of keyboard event

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

6. Time format

Use YYYY/MM/DD HH:mm:ss as much as possible
because the Safari browser only supports the format YYYY/MM/DD HH:mm:ss and does not support YYYY-MM-DD HH:mm:ss.

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

7. Get the scroll bar height

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

8.Problems with innerText

Problem description: innerText works normally in IE, but innerText does not work in FireFox.
Solution: Use textContent instead of innerText in non-IE browsers.

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

9. Try not to use setAttribute()

        Using setAttribute to set style and onclick attributes does not work in IE. In order to achieve compatibility with various browsers, you can use dot notation to set the object properties, collection properties and event properties of Element.

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

10.Set class name

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

11.event.x and event.y issues

        Description of the problem: Under IE, the even object has x and y attributes, but no pageX and pageY attributes; under Firefox, the even object has pageX and pageY attributes, but no x and y attributes.

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

12. Get the dom parent element

        Under IE, use obj.parentElement or obj.parentNode to access obj's parent node; under Firefox, use obj.parentNode to access obj's parent node.

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

13. Access and set data in the clipboard

        To access the data in the clipboard, you can use the clipboardData object: in IE, this object is a property of the window object; in Firefox, Chrome, and Safari, this object is a property of the event object.

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");
};