Warum ist der Umriss größer als sein div?

Question

UPDATE

Um die Eingabe zurück auf die Größe bekommt ich es sein will, hatte ich von Polsterung und Grenzen loszuwerden. Das dies erreicht folgendes:

*{padding:0; margin:0; border:0;} 

Dank CBroe, entdeckte ich, das ist einzigartig für FF, die eine Standard-Grenze von .75px und eine Polsterung von 1.5px zum input hinzufügt. Für eine Gesamtmenge von ungefähr 4.5px. Chrome nicht.

UPDATE 2

Die oben fix das untergeordnete Element I auf die Größe dachte nur zurückkommt es sein sollte. Die folgende akzeptierte Antwort zeigt, dass FF einen Fehler hat, der erklärt, warum sich die Gliederung nicht wie gewünscht verhält, die Gliederung nur für die übergeordneten Elemente und nicht für absolute positionierte Nachkommen.

---

Ich habe zwei div Elemente vertikal gestapelt mit ihrem outline Eigenschaft auf 1px. Die div Elemente haben eine height von 117px.

Ich erwarte, wo die beiden div Elemente treffen, um ihre Konturen zusammenhängend zu haben. Es tut so ohne Inhalt.

Wenn ich einen absolute positionierten Eingang mit top = 97px und Höhe = 20px in den oberen div platziere, wird der Umriss dieses div nach unten geschoben.

Hier ist a fiddle, die dies zeigt. Wenn Sie die input entfernen, werden Sie sehen, wie die obere div Gliederung neben der unteren div sitzt.

Es gibt zwei Dinge (zumindest), die ich nicht verstehe:

1) in das Feld Prüfung des Browsers Entwickler-Tools (Firefox) verwendet wird, sehe ich, dass die oben div in der Tat ist noch 117px hoch. Der Umriss sollte um das div gezogen werden, scheint aber nicht zu sein. Warum?

2) Der Eingang hat eine Spitze von 97px plus eine Höhe von 20px. Warum würde dies die Position des Umrisses beeinflussen? Es sieht so aus, als ob der Umriss um 4 Pixel nach unten geschoben wurde.

Answer 1

Das ist, weil outlines Implementierung abhängig sind. Es ist nicht nur die Größe:

Umrisse können nicht rechteckig sein.

Von CSS3 UI,

Diese Spezifikation definiert nicht die genaue Position oder die Form des Umrisses, aber es ist in der Regel unmittelbar vor der Grenze Feld gezogen.

Firefox hatte historisch eine Tendenz, Umrisse in verschiedenen Situationen, z.

• outlines are drawn outside (i.e., expanded by) box-shadow and other visual overflow
• outlines are drawn outside (expanded by) outlines on descendant elements

Der ehemalige fixiert wurde, scheint diese das gleiche wie Ihr Problem.

Answer 2

Ich habe 2 Antworten für Sie:

1) In der Box Prüfung des Browsers Entwickler-Tools (Firefox) verwendet wird, sehe ich, dass die oben div in der Tat ist noch 117px hoch. Der Umriss sollte um das div gezogen werden, scheint aber nicht zu sein. Warum?

Der Umriss scheint um alles herum gezeichnet zu sein. Also, wenn ein Element 100px an der Unterseite hervorsteht. Der Umriss wird ebenfalls um 100 Pixel verschoben. In diesem Fall steht das Eingabeelement 8px. Der Umriss ist also 8 Pixel länger als erwartet.

Der Eingang hat eine Spitze von 97px plus eine Höhe von 20px. Warum würde dies die Position des Umrisses beeinflussen? Es sieht so aus, als ob der Umriss um 4 Pixel nach unten geschoben wurde.

Sie waren fast genau dort, 97px + 20px ist tatsächlich 117px Höhe. Aber Sie haben vergessen, 8px aus dem Eingabeelement zu zählen. Dies kommt von einem 3px dicken Rand + 1px dicke Polsterung.