Maison > Article > interface Web > Introduction détaillée aux pages Web développées avec JavaScript et compatibles avec différents navigateurs

Introduction détaillée aux pages Web développées avec JavaScript et compatibles avec différents navigateurs

黄舟original: 2017-10-03 06:00:321300parcourir

Cet article présente principalement les informations pertinentes sur le développement javascript de pages Web compatibles avec différents navigateurs. Voici plusieurs méthodes pour vous aider à maîtriser ces fonctions. Les amis dans le besoin peuvent se référer à

pages Web de développement javascript. sont compatibles avec différents navigateurs

Avant-propos :

Il est courant que CSS soit compatible avec différents navigateurs. Il existe des didacticiels partout sur Internet. Le contenu suivant est disponible ici. n'est pas beaucoup de nouveauté, c'est purement un résumé personnel, j'espère qu'il pourra être d'une certaine aide aux débutants.

1. CSS HACK

Ce qui suit deux méthodes sont presque identiques. Peut résoudre tous les HACK d'aujourd'hui.

1, !important

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

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

2, IE6/IE77 pour FireFox

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

<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 clear float, veuillez vous référer à [Comment effacer les flotteurs sans balisage structurel]

Ajoutez le code suivant au Global CSS et ajoutez class="clearfix" au p qui doit être fermé. Cela fonctionne à chaque fois.

<style>


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

.clearfix {display:block;}


</style>

Autres conseils de compatibilité (encore une fois)

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

2, problème de centrage

<.>1). Centré verticalement. Réglez la hauteur de ligne sur la même hauteur, puis passez l'alignement vertical : milieu (Attention à ne pas envelopper le contenu.)

2). : 0 auto; (Bien sûr, ce n'est pas tout-puissant)

3, si nécessaire Pour ajouter du style au contenu de la balise a, vous devez définir display: block;

4. La différence de compréhension de BOX entre FF et IE entraîne une différence de 2 pixels et p est défini sur flottant. Des problèmes tels que le doublement de la marge 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 pour éviter des problèmes inutiles (courant dans les balises de navigation et la liste de contenu)

6, Comme le. wrapper externe p, ne définissez pas de hauteur fixe. Il est préférable d'ajouter un débordement : caché pour obtenir une adaptation en hauteur.

7, Concernant le curseur de la main : le pointeur ne s'applique qu'à. IE.

P.S Quant à IE5 et autres navigateurs, il n'est pas nécessaire d'en tenir compte. Cela ne vaut pas la peine d'y consacrer du temps.

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：Exemple de JavaScript implémentant une fonction de filtrage multi-conditions pour les données frontalesArticle suivant：Exemple de JavaScript implémentant une fonction de filtrage multi-conditions pour les données frontales

Articles Liés

Voir plus