Breite input type=text element
Kommen, wie wenn ich dies tun:
<input type="text" style="width: 10px; padding: 2px"/>
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div>die Eingabe endet 2 px breiter als das div in beiden IE6 und FF3? Was bin ich?
BEARBEITEN:
Wie viele Leute haben gesagt, die Grenze ist das Problem. Wenn ich border: 0px auf den input, es hat die gleiche Breite wie die div mit einem 0 px Grenze (verifiziert durch das einwickeln von es in einem eingerahmten BEREICH).
Allerdings, wenn ich Messen die Elemente, die in Farbe, das div hat eine 14 px Innenraum, wie zu erwarten (10+2+2). Der Eingang hat jedoch eine 16 px Innenraum, und dann eine Grenze, die außerhalb dieses. Warum ist das so? Wahrscheinlich kein bug, denn es passiert sowohl in IE6 und FF3, aber ich verstehe nicht es.
InformationsquelleAutor der Frage erikkallen | 2009-07-17
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich glaube, dass ist nur, wie der browser Ihre standard-Eingabe. Wenn Sie eine Grenze gesetzt, die auf den Eingang:
Dann sind beide die gleiche Breite, zumindest im FF.
InformationsquelleAutor der Antwort pegasus4747
Den sichtbar Breite eines Elements ist
width + padding + border + outlineso dass es scheint, dass Sie vergessen, über die Grenze auf das input-element. Das ist, zu sagen, dass die Standard-Randbreite für ein input-element auf den meisten (einige?) Browser ist tatsächlich berechnet als 2px, nicht ein. Damit werden Ihre Eingaben erscheinen als 2px breiter. Versuchen Sie explizit festlegen desborder-widthauf den Eingang, oder das div breiter.InformationsquelleAutor der Antwort jason
Eingang Breite ist 10 + 2 mal 1 px für Grenze
InformationsquelleAutor der Antwort Perica Zivkovic
Ich glaube, Sie haben vergessen, über die Grenze. Mit einer ein-pixel breiten Rand auf der Div wird nehmen zwei Pixel der Gesamtlänge. Deshalb wird es erscheinen, als ob das div-Element zwei Pixel kürzer, als es tatsächlich ist.
InformationsquelleAutor der Antwort Matthew Jones