Un très bon article sur les différences entre js et css dans IE et FireFox [Réimprimé de Catching Fire]_Experience Exchange

J'ai vu cet article sur Blue, et j'ai l'impression que l'auteur l'a bien résumé, du moins certains dont je n'ai jamais vraiment connu. Ces choses devraient vraiment être résumées, mais malheureusement je suis une personne paresseuse, alors je les ai rassemblées ici pour faciliter mon propre apprentissage !

1.firefox ne peut pas prendre en charge innerText.
Firefox prend en charge innerHTML mais pas innerText. Il prend en charge textContent pour implémenter innerText, mais les espaces supplémentaires sont également conservés par défaut. Si textContent n'est pas utilisé, innerHTML peut être utilisé à la place si la chaîne ne contient pas de code HTML.
2. Désactivez la sélection du contenu de la page Web :
Utilisez généralement js dans IE : obj.onselectstart=function(){return false;}
Et Firefox utilise CSS:-moz- user -select:none

3. Prise en charge du filtre (par exemple : filtre transparent) :
IE:filter: alpha(opacity=10>firefox: - moz); -opacity:.10;


4. Capturer les événements : IE : obj.setCapture(), obj.releaseCapture()
Firefox : document.addEventListener(" mousemove ",mousemovefunction,true);
document.removeEventListener("mousemove",mousemovefunction,true);


5. Obtenez la position de la souris :
IE:event.clientX , event.clientY firefox : La fonction événementielle est requise pour transmettre l'objet événement
obj.onmousemove=function(ev){
　🎜>
6. Problèmes de limites du DIV et d'autres éléments :

Par exemple : définir le CSS d'un div : {width:100px;height:100px;border:#000000 1px solid;}
IE Medium : largeur du div (y compris la largeur de la bordure) : 100px, hauteur de div (y compris la largeur de la bordure) : 100px ; Et firefox : largeur du div (y compris la largeur de la bordure) : 102px, hauteur du div (y compris la largeur de la bordure) :

Donc lors de la création cette fenêtre de glisser qui est compatible avec IE et Firefox, vous devez utiliser votre cerveau lors de l'écriture de js et css. Voici deux conseils pour vous

Un . Déterminez le type de navigateur :
var isIE=document. all? true:false;
J'ai écrit une variable. Si elle prend en charge la syntaxe document.all, alors isIE=true, sinon isIE=false

2. Traitement CSS sous différents navigateurs :
En général, vous pouvez utiliser !important pour prioriser l'utilisation des instructions CSS (uniquement supporté par Firefox)
Par exemple : {border-width:0px!important;border-width:1px;}
Cet élément n'a pas de bordure sous Firefox , et la largeur de la bordure est de 1 px sous IE


Plusieurs différences entre XHTML et JS et CSS normaux

Sur la page Web L'ajout de ce code au début est ce qu'on appelle la norme XHTML


Plusieurs différences sous le standard XHTML :
1.document.documentElement et document.body nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Définir le CSS de la page dans le code Assurez-vous d'utiliser : document.documentElement
Par exemple : document.documentElement.style.overflow='hidden';
overflow-X, overflow-Y, ces deux attributs de coordonnées ne sont pas pris en charge par XHTML

2. être utilisé lors de l'obtention de la zone de fenêtre de la page Web et de la distance de déplacement de la barre de défilement
C'est-à-dire que ces quatre propriétés (clientWidth, clientHeight, scrollLeft, scrollTop) doivent utiliser document.documentElement
Mais document.body.appendChild() et document .body.removeChild() peut être utilisé, mais l'utilisation de document.documentElement.appendChild() et document.documentElement.removeChild() à la place signalera une erreur ;

Résumé Document.documentElement n'est utilisé que pour clientWidth, clientHeight ; , scrollLeft, scrollTop et document.documentElement.style

3 Après l'ajout de cette norme, le problème de bordure d'IE a également changé, et il est désormais cohérent avec Firefox , est-ce l'avantage de XHTML - le multi-navigateur. standard
mentionné ci-dessus :
Définir le CSS d'un div :: {width:100px;height:100px;border:#000000 1px solid;}
Dans IE (situation normale) : largeur du div (y compris la bordure largeur) : 100 px, hauteur du div (y compris la largeur de la bordure) : 100 px ;
firefox (situation normale) : largeur du div (y compris la largeur de la bordure) : 102 px, hauteur du div (y compris la largeur de la bordure) : 102 px ; 🎜>Après avoir ajouté le standard XHTML (IE et Firefox sont réconciliés, ^_^) :
Dans IE (XHTML) : largeur du div (y compris la largeur de la bordure) : 102 px, hauteur du div (y compris la largeur de la bordure) : 102 px ; >firefox (XHTML) : largeur div (y compris la largeur de la bordure) : 102 px, hauteur du div (y compris la largeur de la bordure) : 102 px ;