Problemas comunes de compatibilidad del navegador (css, js)

1. Los estilos CSS son compatibles con diferentes navegadores.

Navegador	prefijo
cromo	-kit web
safari	-kit web
firefox	-moz
ES DECIR	-EM
ópera	-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. Compatibilidad de diferentes navegadores con varios problemas de escenas comunes de js

1. Forma compatible de obtener el objeto de evento.

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

2. Métodos compatibles de difusión de eventos

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

3. Métodos compatibles para evitar el comportamiento predeterminado del navegador

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

4. Métodos compatibles para configurar y eliminar eventos de escucha

// 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. Valor clave del evento de teclado

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

6. Formato de hora

Utilice AAAA/MM/DD HH:mm:ss tanto como sea posible
porque el navegador Safari solo admite el formato AAAA/MM/DD HH:mm:ss y no admite AAAA-MM-DD HH:mm:ss.

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

7. Obtenga la altura de la barra de desplazamiento.

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

8.Problemas con texto interno

Descripción del problema: InnerText funciona normalmente en IE, pero InnerText no funciona en FireFox.
Solución: utilice textContent en lugar de internalText en navegadores que no sean IE.

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

9. Intente no utilizar setAttribute()

        El uso de setAttribute para establecer atributos de estilo y onclick no funciona en IE. Para lograr compatibilidad con varios navegadores, puede utilizar la notación de puntos para establecer las propiedades del objeto, las propiedades de la colección y las propiedades del evento de Element.

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

10.Establecer nombre de clase

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

11.Problemas event.x y event.y

        Descripción del problema: en IE, el objeto par tiene atributos xey, pero no atributos pageX y pageY; en Firefox, el objeto par tiene atributos pageX y pageY, pero no atributos xey.

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

12. Obtenga el elemento padre dom

        En IE, use obj.parentElement u obj.parentNode para acceder al nodo principal de obj; en Firefox, use obj.parentNode para acceder al nodo principal de obj.

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

13. Acceder y configurar datos en el portapapeles.

        Para acceder a los datos en el portapapeles, puede utilizar el objeto clipboardData: en IE, este objeto es una propiedad del objeto de ventana; en Firefox, Chrome y Safari, este objeto es una propiedad del objeto de evento.

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