Certains des bugs et solutions les plus élémentaires des navigateurs IE en CSS

Comment résoudre les bugs en CSS ? Je pense que de nombreux amis qui viennent d'entrer en contact avec CSS dans le navigateur IE se poseront de telles questions. Ce chapitre vous présentera certains des bogues et solutions les plus élémentaires des navigateurs IE en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Bug de double marge dans IE6

Lorsque des éléments de la page flottent à l'aide de float, que ce soit à gauche ou à droite left Flotte vers la droite ; tant que l'élément a un pixel de marge, la valeur sera multipliée par 2, par exemple, "margin-left:10px" Dans IE6, la valeur sera analysée comme 20px. Pour résoudre ce BUG, ​​vous devez ajouter display:inline ou display:block à l'élément et clarifier son type d'élément pour résoudre le BUG à double marge.

2. Problème de 3 pixels et solution dans IE6

Lorsqu'un élément flotte à l'aide de float, un espace de 3 pixels sera généré entre l'élément et les éléments adjacents. Ce qui est étrange, c'est que si la hauteur du conteneur de droite n'est pas définie, l'espace de 3 pixels se trouve à l'intérieur du conteneur adjacent. Lorsque la hauteur est définie, il va du côté opposé du conteneur. Pour résoudre ce genre de bug, vous devez ajouter float à tous les éléments disposés sur la même ligne.

3. BUG de largeur et hauteur impaires dans IE6

Il existe une certaine différence entre la taille d'affichage de hauteur et de largeur impaires dans IE6 et la taille d'affichage paire hauteur et largeur. Le principal problème est la hauteur et la largeur impaires. Pour résoudre ce genre de problème, essayez simplement d’écrire la hauteur et la largeur du div positionné à l’extérieur sous la forme d’un nombre pair.

4. Il y a un espace sous le lien de l'image dans IE6

Il y aura un certain espace sous l'image dans IE6, surtout lorsque l'image est verticalement à côté. l'image, c'est-à-dire que vous pouvez voir cet écart. Pour résoudre de tels problèmes, vous devez définir la balise img comme display:block ou définir l'attribut correspondant à vertical-align. Vous pouvez également écrire font-size:0

pour le style correspondant à img 5. La hauteur des éléments vides sous IE6 est BUG

S'il n'y a pas de contenu. dans un élément, lors de la définition d'une hauteur comprise entre 0 et 19 px pour cet élément dans le style. La hauteur de cet élément est toujours de 19px.

Il existe quatre solutions :

1. Ajouter : overflow:hidden au css de l'élément

2. Insérer des commentaires html dans l'élément :

3. Insérez le caractère d'espacement html dans l'élément :  

4. Ajoutez au CSS de l'élément : font-size:0

6. BUG de texte répété

Dans certaines mises en page plus complexes, parfois les derniers caractères de l'élément flottant apparaîtront sous l'élément clair.

La solution est la suivante :

1. Assurez-vous que tous les éléments ont display:inline

2. Utilisez "margin-right:-3px

sur le dernier. element

3. Ajoutez un commentaire conditionnel à la dernière entrée de l'élément flottant, xxx

4. Utilisez un div vide au dernier élément du conteneur. , pour cela, le div spécifié ne doit pas dépasser la largeur du conteneur. 7. Z-index échoue dans IE6

Le BUG spécifique est que le z-index de l'élément parent est défini sur. 1. , alors le z-index de ses éléments enfants sera invalide, et son niveau héritera des paramètres de l'élément parent, provoquant quelques bugs d'ajustement de niveau

Conclusion : En fait, il y a beaucoup de bugs dans. IE6. Les solutions peuvent être résolues en utilisant display:inline, font-size:0 et float. Par conséquent, lors de l'écriture du code, nous devons nous rappeler qu'une fois float utilisé, ajoutez un style display:inline à l'élément, ce qui peut être efficace. évitez le flottement. Le problème de confusion de style Lorsque vous utilisez un DIV vide, afin d'éviter que sa hauteur n'affecte la beauté de la mise en page, vous pouvez également y ajouter font-size:0 pour éviter facilement certains problèmes de compatibilité

.

Ce qui précède concerne CSS. Une introduction complète à certains des bogues les plus élémentaires des navigateurs IE et à leurs solutions. Si vous souhaitez en savoir plus sur les

Tutoriels vidéo CSS

, veuillez faire attention au chinois PHP. site Internet >

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!