Lorsque vous écrivez des boutons (entrée, bouton), vous le trouverez sous IE:
À mesure que le nombre de mots augmente, l'espacement entre les deux côtés deviendra de plus en plus grand.
Dans le style XP de Win, lorsque le nombre de mots est grand, il y aura sévère la lance des deux côtés.
Quelle est exactement la raison?
La colonne de normalisation Web d'origine de Blue Ideal donne une réponse:
1. Chaque fois que IE ajoute la valeur du bouton de 4 octets (2 caractères chinois), une largeur de marge d'un total d'un octet sera générée des deux côtés du bouton.
2. Le style par défaut du bouton IE (style XP) est une image rectangulaire arrondi à taille fixe comme arrière-plan, donc une fois que le bouton deviendra plus large et plus haut, les bords de cette image rectangulaire arrondi à taille fixe semblera naturellement être givrée.
Nous ne pouvons pas résoudre le deuxième problème pour le moment, sauf si le système Win corrige le bogue lui-même, mais nous pouvons toujours résoudre le premier problème.
Définissez la valeur visible de l'attribut de débordement pour l'élément bouton sous IE (Remarque: La valeur de rembourrage n'est valide qu'après défini l'attribut Visible: Visible). Cette propriété a en fait été utilisée dans le dernier article "Application de l'arrière-plan et de l'arrière-plan". Cependant, après avoir lu "le problème des boutons étirés dans IE" aujourd'hui, j'ai constaté qu'il y avait un petit bug - si vous placez le bouton dans une cellule de table, bien que le bouton s'affiche correctement, la largeur réservée d'origine n'a pas changé et occupe toujours un espace. Vous devez définir la largeur du bouton sur 0 dans IE6 (IE7 a également ce bogue, mais aucun bon moyen de le résoudre pour le moment).
Le code de correction final est le suivant (démo):
input.button {padding: 0 .25em; Largeur: Auto; _Width: 0; débordement: visible! ie;}