Breite input type = text Element

Question

Wie kommt es, wenn ich dies tun:

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

der Eingang endet 2 px breiter als die div sowohl in IE6 und FF3? Was vermisse ich?

EDIT: Wie viele Leute gesagt haben, ist die Grenze das Problem. Wenn ich border: 0px auf der Eingabe einstelle, hat es die gleiche Breite wie div mit einer 0 px Grenze (verifiziert, indem es in einen umrandeten SPAN eingeschlossen wird).

Wenn ich jedoch die Elemente in Farbe messe, hat das div einen 14 px Innenraum, genau wie erwartet (10 + 2 + 2). Die Eingabe hat jedoch einen inneren Bereich von 16 px und dann einen Rahmen außerhalb. Warum ist das? Wahrscheinlich kein Fehler, da es in IE6 und FF3 passiert, aber ich verstehe es nicht.

Answer 1

Ich glaube, dass ist so, wie der Browser ihre Standardeingabe rendert. Wenn Sie am Eingang einen Rahmen setzen:

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

Dann haben beide die gleiche Breite, zumindest in FF.

Answer 2

Die sichtbar Breite eines Elements ist width + padding + border + outline, so scheint es, dass Sie über die Grenze auf dem Eingabeelement vergessen haben. Das heißt, dass die Standard-Rahmenbreite für ein Eingabeelement in den meisten (einigen?) Browsern tatsächlich als 2px berechnet wird, nicht als eine. Daher erscheint deine Eingabe als 2px breiter. Versuchen Sie explizit, border-width auf die Eingabe zu setzen oder Ihre div breiter zu machen.

Answer 3

Eingangsbreite beträgt 10 + 2 mal 1 Pixel für die Grenz

Answer 4

Ich glaube, Sie über die Grenze sind, zu vergessen. Mit einem ein Pixel breiten Rand an der Div wird zwei Pixel der Gesamtlänge wegnehmen. Daher wird es so erscheinen, als wäre das Div zwei Pixel kürzer als es tatsächlich ist.