Largeur du type d'entrée = élément de texte

Comment se fait lorsque je fais ceci:

<input type="text" style="width: 10px; padding: 2px"/>
<div style="width: 10px; border: solid 1px black; padding: 2px">&nbsp;</div>

l'entrée se termine en hausse de 2 px plus large que la div dans les deux IE6 et FF3? Ce qui me manque?

EDIT:
Comme beaucoup de gens l'ont dit, la frontière est le problème. Si j'ai mis border: 0px sur l'entrée, il aura la même largeur que le div avec un 0 px frontière (vérifié par l'enveloppant à l'intérieur d'une bordée SPAN).

Cependant, lorsque je mesure les éléments dans la peinture, la div a un 14 px de l'intérieur, comme prévu (10+2+2). L'entrée, cependant, a un 16 px de l'intérieur, puis d'une frontière à l'extérieur. Pourquoi est-ce? Probablement pas un bug comme il arrive dans les deux IE6 et FF3, mais je ne comprends pas.

source d'informationauteur erikkallen

  1. 20

    Je crois que c'est juste la façon dont le navigateur rend leur entrée standard. Si vous définissez une frontière à 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>

    Puis les deux sont de la même largeur, au moins en FF.

  2. 4

    La visible largeur d'un élément est width + padding + border + outlinede sorte qu'il semble que vous oubliez au sujet de la frontière sur l'élément d'entrée. C'est-à-dire que par défaut, la largeur de la bordure d'un élément d'entrée sur la plupart (certains?) les navigateurs est en fait calculé comme 2px, pas un seul. Par conséquent, votre avis est apparaissant comme 2px plus large. Essayez de définir explicitement la border-width sur l'entrée, ou de faire votre div plus large.

  3. 0

    largeur d'entrée est de 10 + 2 fois 1 px de la frontière,

  4. 0

    Je pense que vous avez oublier la frontière. Disposer d'un pixel à l'échelle de la frontière sur la Div sera emporter deux pixels de longueur totale. Par conséquent, il apparaîtra comme si la div est de deux pixels plus courte qu'elle ne l'est réellement.