Maison  >  Article  >  interface Web  >  Le bouton est étiré des deux côtés dans IE BUG_HTML/Xhtml_Webpage Production

Le bouton est étiré des deux côtés dans IE BUG_HTML/Xhtml_Webpage Production

WBOY
WBOYoriginal
2016-05-16 16:43:58984parcourir

Lorsque vous écrivez des boutons (entrée, bouton), vous constaterez que sous IE :
À mesure que le nombre de mots augmente, l'espace entre les deux côtés deviendra de plus en plus grand.
Dans le style XP de WIN, lorsque le nombre de mots est important, de sérieuses irrégularités apparaîtront des deux côtés.
Quelle est la raison ?
Bamboo zbm2001z de la colonne de normalisation WEB originale de Blue Ideal a donné une réponse :
1. Lorsque IE augmente la valeur du bouton de 4 octets (2 caractères chinois), il apparaîtra des deux côtés du bouton. largeur de remplissage totale d'un octet.
2. Le style par défaut du bouton d'IE (style XP) est une image rectangulaire arrondie de taille fixe comme arrière-plan, donc une fois que le bouton devient plus large et plus haut, les bords de cette image rectangulaire arrondie de taille fixe apparaîtront naturellement " Phénomène d’arrachage de cheveux.
Pour le deuxième problème, nous n'avons aucun moyen de le résoudre pour le moment, à moins que le système WIN corrige lui-même le BUG, ​​mais pour le premier problème, nous pouvons toujours le résoudre.
Définissez la valeur visible de l'attribut overflow pour l'élément bouton sous IE (Remarque : la valeur de remplissage n'est valide qu'une fois l'attribut overflow:visible défini. Cet attribut est en fait mentionné dans le "background-clip et background-). origin" article écrit la dernière fois. Il a été utilisé dans l'article "Then Application". Cependant, après avoir lu "Le problème des boutons étirés dans IE" aujourd'hui, j'ai découvert qu'il y avait encore un petit bug - si le bouton est placé dans une cellule du tableau, bien que le bouton s'affiche correctement, la largeur initialement réservée n'a pas changé. , occupant toujours de l'espace, vous devez définir la largeur du bouton sur 0 dans IE6 (IE7 a également ce BUG, ​​​​mais il n'y a pas encore de bon moyen de le résoudre).
Le code de réparation final est le suivant (Démo) :
input.button { padding: 0 .25em; width: auto; overflow:visible !ie;}

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