Comment résoudre le problème des lacunes sous les images CSS

Cet article présente principalement 6 solutions au problème des lacunes sous les images CSS. Les amis dans le besoin peuvent s'y référer

Lors de la composition p+CSS sur la page, j'ai rencontré IE6 (bien sûr parfois sous Firefox ) Je le rencontrerai aussi de temps en temps) Le problème de l'espace blanc supplémentaire sous l'élément d'image img dans le navigateur est certainement courant. La solution à ce problème est également de "le lire à l'oreille". Différentes solutions sont utilisées ici en fonction des raisons. est la solution directement. Voici un résumé des méthodes courantes pour corriger les bogues avec des espaces supplémentaires sous la mise en page de l'image pour votre référence.

1. Convertissez l'image en un objet de niveau bloc

C'est-à-dire, définissez img sur :

affichage : block;

Ajoutez un ensemble de codes CSS dans cet exemple :

#sub img {display:block;}

Invalide pour IE6/7

2. de l'image

Il peut également être résolu en définissant l'attribut d'alignement vertical de l'image sur "top, text-top, bottom, text-bottom". Par exemple, dans cet exemple, ajoutez un ensemble de codes CSS :

#sub img {vertical-align:top;}

3. Définissez la taille du texte de l'objet parent sur 0px

C'est-à-dire, ajoutez une ligne dans #sub :

 font-size:0;

Peut résoudre le problème. Mais cela a également provoqué un nouveau problème : le texte de l'objet parent ne peut pas être affiché. Même si la partie texte est entourée d'un sous-objet, elle peut toujours être affichée en définissant la taille du texte du sous-objet, mais lors de la validation du CSS, une erreur sera affichée indiquant que le texte est trop petit.

4. Modifiez les propriétés de l'objet parent

Si la largeur et la hauteur de l'objet parent sont fixes et que la taille de l'image dépend sur l'objet parent, vous pouvez alors définir : overflow:hidden; pour résoudre ce problème.

Dans cet exemple, vous pouvez ajouter le code suivant à #sub :

width:88px;height:31px;overflow:hidden;

5. Définissez l'attribut flottant de l'image .

Dans ce cas, ajoutez une ligne de code CSS :

#sub img {float:left;}

Si vous souhaitez obtenir une disposition mixte d'images et de texte, cette méthode est un bon choix.

6. Annulez l'espace entre la balise image et la dernière balise fermante de son objet parent.

Cette méthode doit être soulignée. Dans le développement réel, cette méthode peut causer des problèmes, car lors de l'écriture du code, afin de rendre le code plus sémantique et plus clair, il est inévitable de fournir le code via l'affichage IDE Indent, ce qui entraînera inévitablement l'affichage d'étiquettes et d'autres étiquettes sur de nouvelles lignes, comme la commande "Appliquer le format source" de DW. Par conséquent, cette méthode peut nous aider à comprendre une situation dans laquelle un BUG se produit. La solution spécifique doit être résolue par tout le monde.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de l'analyse de l'utilisation de l'attribut Animation en CSS3

Deux manières de référencer les fichiers externes CSS

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!