Maison  >  Article  >  interface Web  >  L'élément d'image img présente un problème d'espace blanc redondant sous la production de pages IE6 _HTML/Xhtml_Web

L'élément d'image img présente un problème d'espace blanc redondant sous la production de pages IE6 _HTML/Xhtml_Web

WBOY
WBOYoriginal
2016-05-16 16:41:251507parcourir

Lors de la mise en page CSS DIV sur la page, il est tout à fait courant de rencontrer le problème d'espace blanc excessif sous l'élément image img dans IE6 (bien sûr, parfois dans Firefox. La solution à ce problème est aussi de "voir"). l'opportunité." "Act", différentes solutions doivent être utilisées selon différentes raisons. Nous résumons ici les méthodes courantes pour résoudre le BUG des écarts excessifs sous la mise en page de l'image pour votre référence.
1. Convertissez l'image en un objet de niveau bloc
Autrement dit, définissez img sur : display:block;
Dans cet exemple, ajoutez un ensemble de codes CSS : #sub img {display:block; }
2. Définissez l'alignement vertical de l'image
Autrement dit, définir l'attribut d'alignement vertical de l'image sur "top, text-top, bottom, text-bottom" peut également être résolu. 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
Autrement dit, 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, la définition de la taille du texte du sous-objet peut toujours être affichée, mais un message d'erreur indiquant que le texte est trop petit sera affiché lors de la validation CSS.
4. Modifiez les attributs 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 de l'objet parent, vous pouvez définir : overflow:hidden; problème. Par exemple, 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
Autrement dit, ajoutez une ligne. de code CSS dans cet exemple : #sub img {float:left;}
Si vous souhaitez obtenir une disposition mixte d'images et de texte, cette méthode est un bon choix.
Cette méthode doit être soulignée. Dans le développement réel, cette méthode peut causer des problèmes, car afin de rendre le code plus sémantique et plus clair lors de l'écriture du code, il est inévitable de fournir un affichage de l'indentation du code via l'EDI, ce qui fera inévitablement l'étiquette s'affiche sur une nouvelle ligne avec d'autres balises, telles que 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.

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