Discutez des problèmes de compatibilité du navigateur et parlez des bogues CSS courants (résumé)

Dans ce chapitre, nous discuterons des problèmes de compatibilité du navigateur et parlerons des bogues CSS courants. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Navigateurs grand public courants

1. 🎜> Internet Explorer, Safari, Mozilla Firefox, Google Chrome, Opera, Baidu, 360, Sogou, Maxthon

2. Le premier navigateur :

Mosaic / Netscape Navigator (1994-2008) abrégé en NN

2 Cinq cœurs de navigateur majeurs

Trident (MSHTML) (trident; trident. ligne; harpon à trois dents)

Gecko (Gecko)
Presto (rapide)
Webkit (noyau Safari, prototype du noyau Chrome, c'est le propre noyau d'Apple et aussi celui d'Apple utilisé par le navigateur Safari)
Blink (un moteur de mise en page de navigateur développé par Google et Opera Software).

3. Œuvres représentatives des cinq principaux cœurs de navigateur

*Trident : IE, Maxthon, Tencent, Theworld, 360 Browser

Le travail représentatif est IE. Parce qu'IE est fourni avec Windows, il détient une part de marché très élevée. Il est également appelé noyau IE ou MSHTML. Ce noyau ne peut être appliqué qu'à la plate-forme Windows et n'est pas open source.

*Gecko : L'œuvre représentative de Mozilla Firefox est open source. Son plus grand avantage est qu'il est multiplateforme et peut fonctionner sur les principaux systèmes d'exploitation tels que Microsoft Windows, Linux et MacOS X.

*Webkit : les œuvres représentatives de Safari et Chrome sont un projet open source.

*Presto : ouvrage représentatif d'Opera, Presto est un moteur de mise en page de navigateur développé par Opera Software. Il est également reconnu comme le moteur de rendu le plus rapide au monde.

*Blink : moteur de présentation de navigateur développé par Google et Opera Software, sorti en avril 2013.

4. Pourquoi des problèmes de compatibilité de navigateur surviennent-ils ?

Étant donné que les principaux navigateurs grand public sont développés par différents fabricants, l'architecture de base et le code utilisés sont également difficiles à recombiner, ce qui offre des opportunités pour divers bugs inexplicables (foyers d'erreurs de code). Couplée aux diverses barrières techniques mises en place par les grands fabricants par souci de leurs propres intérêts, l'application du CSS est plus difficile qu'on ne l'imaginait. Les problèmes de compatibilité des navigateurs sont quelque chose que nous devons surmonter.

Bogue CSS, piratage et filtre CSS

1. Bug CSS :

Le problème de l'analyse incohérente des styles CSS dans différents navigateurs, ou le problème selon lequel les styles CSS ne peuvent pas être affichés correctement dans les navigateurs est appelé un bug CSS

2. En CSS, Hack fait référence à une technique compatible avec l'affichage correct du CSS dans différents navigateurs, car il s'agit toutes de modifications personnelles non officielles du code CSS, ou de correctifs non officiels. Certaines personnes préfèrent utiliser patch pour décrire ce comportement.

3. Filtre :

signifie filtre, qui est un moyen d'afficher ou de masquer des règles ou des instructions pour un navigateur ou un groupe de navigateurs spécifique. Essentiellement, Filter est un type de Hack utilisé pour filtrer différents navigateurs.

5. Quelques effets secondaires de l'utilisation de HackRéduit la lisibilité du code CSS et augmente la charge du code.

Il existe généralement deux méthodes pour concevoir des hacks et des filtres CSS :

1) La première consiste à utiliser le propre bug du navigateur pour masquer ou afficher des styles ou des déclarations

 ; 2) L'autre consiste à profiter de la prise en charge imparfaite du CSS par le navigateur, comme le manque de prise en charge de certaines règles ou syntaxes, pour masquer ou afficher les styles.

6. Bugs CSS courants1. Lorsqu'une image est ajoutée à IE, une bordure apparaît. Hack : Add border:0; or border:0 none;

2 Picture gap BUG in div
. Description : lors de l'insertion d'une image dans un div, l'image agrandira le bas du div d'environ trois pixels.

Hack1 : Écrivez et sur une seule ligne

Hack2 : Convertissez en élément de bloc, ajoutez l'instruction : display:block

dt, écart d'image dans li
Hack : Convertissez en élément de bloc, ajoutez l'instruction : display:block;

3. Double float (double marge) (apparaît uniquement dans IE6)

. Description : lorsque les navigateurs Ie6 et inférieurs analysent les éléments flottants, ils doublent incorrectement la marge flottante.

Hack : Ajoutez une déclaration à l'élément flottant : display:inline

4. Hauteur par défaut (IE6, IE7)

Description : Dans IE6 et versions antérieures, certains éléments de bloc ont une hauteur par défaut (environ 16 px ;)
Hack1 : Ajouter une déclaration à l'élément : font-size:0;
Hack2 : Ajoutez une instruction à l'élément : overflow:hidden;

5. L'alignement de la hauteur des lignes des éléments du formulaire est incohérent
Description : L'alignement de la hauteur des lignes des éléments du formulaire est incohérent
Hack : Ajoutez une instruction à l'élément de formulaire : float:left;

6 Les tailles par défaut des éléments de bouton sont différentes
. Description : La taille des éléments des boutons dans différents navigateurs est incohérente
Hack1 : Taille uniforme/(simulé avec une marque)
Hack2 : mettez une étiquette autour de l'entrée, écrivez le style du bouton dans cette étiquette et supprimez la bordure de l'entrée.
Hack3 : Si le bouton est une image, utilisez simplement l'image comme image d'arrière-plan du bouton.

7. Pourcentage de bugs
Description : lors de l'analyse du pourcentage dans IE6 et versions antérieures, il sera calculé par arrondi, ce qui entraînera une situation où 50 % plus 50 % est supérieur à 100 %. (Il sera également affecté par le système)
Hack : Ajoutez une déclaration à l'élément flottant à droite :
clear:right Signification : efface le flotteur droit.
clear:left : efface le flotteur gauche
clear:both : efface les flotteurs des deux côtés

Bogue du pointeur de la souris
Description : La valeur de l'attribut hand de l'attribut curseur n'est reconnue que par les navigateurs inférieurs à IE9, et les autres navigateurs ne reconnaissent pas cette instruction. La valeur de l'attribut pointeur de l'attribut curseur est reconnue par IE6.0 et supérieur et par d'autres navigateurs du noyau.
Hack : Si vous unifiez la forme du pointeur de la souris d'un élément en une forme de main,
La déclaration doit être ajoutée : curseur:pointeur

9 Attribut transparent
. Compatible avec d'autres navigateurs Méthode d'écriture : opacity:value; (la plage de valeurs est 0-1 ; Exemple : opacity:0.5; )
Méthode d'écriture du navigateur IE : filter:alpha(opacity=value); plage de valeurs 1-100 (entier)

10 BUG dans la liste
. 1) : Un bug vertical se produira lorsque l'élément parent (li) a float:left ; l'élément enfant (a) ne définit pas float ; Hack : définissez float pour l'élément parent li et l'élément enfant a ; 2) : Lors de la conversion d'un in li en bloc ; et qu'il a une hauteur et un float, si float n'est pas défini dans li, un affichage en échelle apparaîtra. Hack : ajoutez float à li en même temps ; . Marge haut et bas Chevauchement
Description : Lorsque l'élément actuel (le premier élément enfant de l'élément parent) et l'élément parent n'ont aucun flotteur défini, après avoir défini margin-top, margin-top sera ajouté au élément parent par erreur

Piratage CSS :

1. Ajoutez overflow:hidden; à l'élément parent (recommandé)
2. Ajoutez float à l'élément parent ou à l'élément enfant

12. margin BUG
Lorsque deux éléments sont disposés l'un au-dessus de l'autre, l'élément supérieur a margin-bottom : 30px ; l'élément inférieur a margin-top : 20px ; la distance entre eux ne se chevauchera pas, mais sera définie sur une valeur plus grande

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!