Cet article résume les problèmes de compatibilité entre navigateurs de CSS et JavaScript sous la forme d'un grand nombre d'exemples. Partagez-le avec tout le monde pour votre référence. Le résumé spécifique est le suivant :
1. Compatibilité des styles CSS
1. Fermeture FLOAT (effacement du flotteur)
Lorsque les pages Web s'affichent mal alignées sur certains navigateurs, c'est souvent parce que float est utilisé au lieu d'être véritablement fermé. C'est aussi l'une des raisons pour lesquelles les divs ne peuvent pas s'adapter à leur hauteur. Si le div parent n'est pas défini sur float mais que son div enfant est défini sur float, le div parent ne peut pas envelopper l'intégralité du DIV enfant. Cette situation se produit généralement lorsqu'un DIV parent contient plusieurs DIV enfants. Solution :
1) Définissez également float sur le DIV parent
2) Ajoutez un DIV vide après tous les DIV enfants (actuellement, Ext le fait), par exemple :
.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
<div class="clear"></div>
</div>
Copier après la connexion
3) Fermeture flottante universelle
Ajoutez le code suivant à Global CSS et ajoutez class="clearfix" au div qui doit être fermé. Cela fonctionne à chaque fois.
<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>
Copier après la connexion
:after (pseudo-objet), définit le contenu qui apparaît après l'objet, généralement utilisé en conjonction avec le contenu. IE ne prend pas en charge ce pseudo-objet et n'est pas pris en charge par les navigateurs Ie, il n'affecte donc pas les navigateurs IE/WIN. . C'est le plus gênant.
4) débordement:auto
Ajoutez simplement overflow:auto au CSS du DIV parent et vous avez terminé. Exemple :
.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
</div>
Copier après la connexion
Le principe est que la raison pour laquelle les éléments périphériques ne peuvent pas bien s'étendre est le trop-plein, car le trop-plein est invisible (voir explication du W3C). Maintenant, tant que vous ajoutez un "overflow:auto" à l'élément périphérique, le problème peut être résolu. Le résultat est qu'à l'exception d'IE, il peut vraiment être résolu. L'étape suivante consiste à résoudre le problème d'IE. Si vous ajoutez "_height:1%", le problème sera complètement résolu. Je l'ai essayé, et cela fonctionne sous IE sans ajouter "_height:1%".
2. Points de suspension de troncature
.hh {
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
Copier après la connexion
Cela coupera automatiquement le texte en excès après avoir dépassé la longueur et se terminera par des points de suspension. La technologie est une bonne technologie, et beaucoup de gens aiment l'utiliser au hasard, mais veuillez noter que Firefox ne la prend pas en charge.
Ajoutez cette phrase à la page pour rendre la page compatible avec IE7
Pour référence ! Permettez-moi de vous rappeler un problème flottant qui nécessite votre attention. Faites attention au réglage de la largeur et de la hauteur du DIV. Faites attention au réglage overflow:hidden; faites attention à la fermeture. Pour Firefox, le style div parent display:inline-block;<🎜. >
3. curseur:main et curseur:pointeur
Firefox ne prend pas en charge la main, mais IE prend en charge le pointeur
Solution : utilisez le pointeur
uniformément
4. Transparence CSS
Plusieurs navigateurs prennent en charge la transparence de différentes manières. Afin de garantir que l'effet de transparence puisse être affiché normalement dans les navigateurs grand public tels que IE, Firefox, Chrome, Safari, etc., nous pouvons définir une classe de transparence, car tant que Je dois écrire 3 éléments, donc je n'ai pas besoin de les copier à chaque fois.
Le code spécifique est le suivant :
.transparent{
filter:alpha(opacity=60); /*支持 IE 浏览器*/
-moz-opacity:0.6; /*支持 FireFox 浏览器*/
opacity:0.6; /*支持 Chrome, Opera, Safari 等浏览器*/
}
Copier après la connexion
largeur et remplissage en 5.css
Dans IE7 et FF, la largeur width n'inclut pas le remplissage, mais dans Ie6, elle inclut le remplissage.
2. Compatible JavaScript
1. enfants et childNodes
Le comportement des enfants, des childNodes fournis par IE et des childNodes sous Firefox est différent. Les ChildNodes sous Firefox compteront les nouvelles lignes et les espaces comme des nœuds enfants du nœud parent, alors que les childNodes et les enfants d'IE ne le feront pas. Par exemple :
Le div avec l'identifiant dd est visualisé à l'aide de childNodes sous IE. Le nombre de nœuds enfants est de 1, tandis que sous ff, il est de trois. Nous pouvons voir dans la visionneuse dom de Firefox que ses childNodes sont ["n", div,. "n"].
Pour simuler l'attribut children dans Firefox, nous pouvons faire ceci :
if (typeof(HTMLElement) != "undefined" && !window.opera) {
HTMLElement.prototype.__defineGetter__("children", function() {
for (var a = [], j = 0, n, i = 0; i < this.childNodes.length; i++) {
n = this.childNodes[i];
if (n.nodeType == 1) {
a[j++] = n;
if (n.name) {
if (!a[n.name])
a[n.name] = [];
a[n.name][a[n.name].length] = n;
}
if (n.id)
a[n.id] = n;
}
}
return a;
});
}
Copier après la connexion
2. Incidents de Firefox et ie
window.event ne peut être utilisé que sous IE, mais pas sous Firefox En effet, l'événement de Firefox ne peut être utilisé que sur la scène où l'événement se produit. Firefox doit ajouter des événements de la source pour le passage des paramètres. IE ignore ce paramètre et utilise window.event pour lire l'événement.
Par exemple, voici comment obtenir la position de la souris sous IE :
<button onclick="onClick()" >获得鼠标点击横坐标</button>
<script type="text/javascript">
function onclick(){
alert(event.clientX);
}
</script>
Copier après la connexion
doit être remplacé par
<button onclick="onClick(event)">获得OuterHTML</button>
<script type="text/javascript">
function onclick(event){
event = event || window.event;
alert(event.clientX);
}
</script>
Copier après la connexion
才能在两种浏览器下使用
3.HTML对象获取问题
FireFox获取方式document.getElementById("idName")
ie使用document.idname或者document.getElementById("idName")
解决办法：统一使用document.getElementById("idName");
4. const问题
在Firefox下，可以使用const关键字或var关键字来定义常量；
IE下，只能使用var关键字来定义常量；
解决方法：统一使用var关键字来定义常量。
5.frame问题
以下面的frame为例：
a)访问frame对象
IE：使用window.frameId或者window.frameName来访问这个frame对象，frameId和frameName可以同名；
Firefox：只能使用window.frameName来访问这个frame对象；
另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象；
b) 切换frame内容
在 IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容；
如果需要将frame中的参数传回父窗口（注意不是opener，而是parent），可以在frame中使用parent来访问父窗口。例如：
parent.document.form1.filename.value="Aqing";
6. body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在；
7. firefox与IE的父元素(parentElement)的区别
IE：obj.parentElement
firefox：obj.parentNode
解决方法：因为firefox与IE都支持DOM，因此全部使用obj.parentNode
8.innerText的问题
innerText在IE中能正常工作，但是innerText在FireFox中却不行，需用textContent；
解决方法：
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('element').innerText = "my text";
} else {
document.getElementById('element').textContent = "my text";
}
Copier après la connexion
9.AJAX获取XMLHTTP的区别
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} elseif (window.ActiveXObject) { // IE的获取方式
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Copier après la connexion
注意：在IE中，xmlhttp.send(content)方法的content可以为空，而firefox则不能为null，应该用send("")，否则会出现411错误。
希望本文所述对大家WEB程序设计有所帮助。
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
