Problèmes courants de compatibilité des navigateurs (css, js)

1. Les styles CSS sont compatibles avec différents navigateurs

Navigateur	préfixe
chrome	-kit Web
safari	-kit Web
Firefox	-moz
C'EST À DIRE	-MS
opéra	-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. Compatibilité des différents navigateurs avec divers problèmes de scène courants js

1. Méthode compatible pour obtenir un objet événementiel

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

2. Méthodes compatibles de bouillonnement d’événements

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

3. Méthodes compatibles pour empêcher le comportement par défaut du navigateur

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

4. Méthodes compatibles pour définir et supprimer des événements d'écoute

// 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. Valeur clé de l'événement clavier

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

6. Format de l'heure

Utilisez autant que possible AAAA/MM/JJ HH:mm:ss
car le navigateur Safari ne prend en charge que le format AAAA/MM/JJ HH:mm:ss et ne prend pas en charge AAAA-MM-JJ HH:mm:ss.

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

7. Obtenez la hauteur de la barre de défilement

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

8.Problèmes avec innerText

Description du problème : innerText fonctionne normalement dans IE, mais innerText ne fonctionne pas dans FireFox.
Solution : utilisez textContent au lieu de innerText dans les navigateurs non IE.

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

9. Essayez de ne pas utiliser setAttribute()

        L'utilisation de setAttribute pour définir les attributs de style et onclick ne fonctionne pas dans IE. Afin d'assurer la compatibilité avec différents navigateurs, vous pouvez utiliser la notation par points pour définir les propriétés d'objet, les propriétés de collection et les propriétés d'événement d'Element.

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

10.Définir le nom de la classe

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

Problèmes 11.event.x et event.y

        Description du problème : Sous IE, l'objet pair a les attributs x et y, mais pas d'attributs pageX et pageY ; sous Firefox, l'objet pair a les attributs pageX et pageY, mais pas d'attributs x et y.

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

12. Obtenez l'élément parent dom

        Sous IE, utilisez obj.parentElement ou obj.parentNode pour accéder au nœud parent d'obj ; sous Firefox, utilisez obj.parentNode pour accéder au nœud parent d'obj.

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

13. Accéder et définir les données dans le presse-papiers

        Pour accéder aux données du presse-papiers, vous pouvez utiliser l'objet clipboardData : dans IE, cet objet est une propriété de l'objet window ; dans Firefox, Chrome et Safari, cet objet est une propriété de l'objet 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");
};