recherche

Maison >interface Web >js tutoriel >Exemples détaillés de pages Web développées en javascript compatibles avec divers navigateurs

Exemples détaillés de pages Web développées en javascript compatibles avec divers navigateurs

小云云
小云云original
2017-12-27 10:02:021024parcourir

Il est courant que CSS soit compatible avec différents navigateurs. Il existe des tutoriels partout sur Internet. Cet article présente principalement les informations pertinentes sur les pages Web développées par JavaScript qui sont compatibles avec différents navigateurs. Voici plusieurs méthodes (purement). Résumé personnel) pour aider tout le monde à maîtriser une telle fonction. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

1. CSS HACK

Les deux méthodes suivantes peuvent résoudre presque tous les HACKs aujourd'hui.

1, !important

Avec le soutien de Prise en charge de IE7 !important, la méthode !important est désormais uniquement pour IE6 HACK (Faites attention à l'écriture. N'oubliez pas que la position de déclaration doit être à l'avance.) 

<style>
#wrapper
{
width: 100px!important;
width: 80px;
}
</style>
.

2, IE6/IE77 pour FireFox

*+html et *html sont des balises spécifiques à IE, que Firefox ne prend pas encore en charge et *+html est spécifique à IE7. balise.

<style>
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
}
</style>

Remarque : 

*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

2. Fermeture flottante universelle (très important ! )

Pour le principe du flotteur transparent, veuillez vous référer à [Comment effacer les flotteurs sans balisage structurel]

Ajoutez le code suivant au Global CSS et ajoutez class=" au p qui doit être fermé. clearfix", cela fonctionne à plusieurs reprises 

<style>


.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}

.clearfix {display:block;}


</style>

3. Autres conseils de compatibilité (encore une fois)

1, FF Définir le remplissage sur p entraînera une augmentation de la largeur et de la hauteur, mais pas IE (peut être résolu avec !important)

2, problème de centrage.

1). Définissez la hauteur de la ligne à la même hauteur que le p actuel, puis utilisez vertical-align: middle (veillez à ne pas envelopper le contenu. .)
2). Marge horizontalement : 0 auto (Bien sûr, ce n'est pas omnipotent)

3. besoin de définir display: block; (commun dans les balises de navigation)

4. FF et IE comprennent BOX La différence entraîne une différence de 2px Il y a aussi des problèmes tels que la marge de p définie sur. float doublant sous IE

5, la balise ul a un style de liste et un remplissage par défaut sous FF. Il est préférable de la déclarer à l'avance, afin d'éviter des problèmes inutiles. balises et listes de contenu)

6. En tant que wrapper externe, p ne doit pas avoir de hauteur fixe. Il est préférable d'ajouter overflow: caché pour obtenir une adaptabilité en hauteur.

7, Concernant le curseur main. curseur : pointeur. Et la main n'est applicable qu'à IE.

P.S Quant à IE5 et aux autres navigateurs, il n'est pas nécessaire de s'en occuper. le temps n'en vaut pas la peine.

Si vous avez des questions, veuillez laisser un message ou vous rendre sur la communauté de ce site pour communiquer et discuter. Merci d'avoir lu, j'espère que cela pourra aider tout le monde. votre soutien à ce site !

Recommandations associées :

Implémentez du code js pour la lecture de musique compatible avec divers navigateurs

Basé sur jquery compatible avec divers navigateurs iframe hauteur adaptative script_jquery

Code d'implémentation du son de lecture de page Web JS compatible avec diverses compétences de navigateurs_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée du sélecteur de filtre de sous-élément jQueryArticle suivant：Explication détaillée du sélecteur de filtre de sous-élément jQuery

Articles Liés

Voir plus