Largeur du type d'entrée = élément de texte
Comment ça se fait quand je fais ça:
<input type="text" style="width: 10px; padding: 2px"/>
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div>
l'entrée finit par 2 px plus large que la div dans IE6 et FF3? Qu'est-ce que je rate?
EDIT: Comme beaucoup de gens l'ont dit, la frontière est le problème. Si je mets border: 0px sur l'entrée, il aura la même largeur que le div avec une bordure de 0 px (vérifié en l'enveloppant dans un SPAN bordé).
Cependant, lorsque je mesure les éléments dans Paint, le div a un intérieur de 14 px, comme prévu (10 + 2 + 2). L'entrée, cependant, a un intérieur de 16 px, puis une bordure à l'extérieur de cela. Pourquoi est-ce? Probablement pas un bug car il se produit à la fois dans IE6 et FF3, mais je ne le comprends pas.
Je crois que c'est juste ainsi que le navigateur rend leur entrée standard. Si vous définissez une bordure sur l'entrée:
<input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/>
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div>
Alors les deux ont la même largeur, au moins en FF.
La largeur visible d'un élément est width + padding + border + outline, il semble donc que vous oubliez la bordure de l'élément d'entrée. C'est-à-dire que la largeur de bordure par défaut pour un élément d'entrée sur la plupart (certains?) Des navigateurs est en fait calculée comme 2 pixels, pas un. Par conséquent, votre entrée apparaît plus large de 2 pixels. Essayez de définir explicitement le border-width sur l'entrée, ou en élargissant votre div.
la largeur d'entrée est de 10 + 2 fois 1 px pour la bordure
Je pense que vous oubliez la frontière. Avoir une bordure d'un pixel sur la Div à emporter deux pixels de longueur totale. Par conséquent, il apparaîtra comme si le div est deux pixels plus court qu'il ne l'est réellement.