.width () gibt 4 Pixel zu viel zurück

Ich habe ein div:

<div class="frame" id="layer1"> ... </div>

mit dem Styling:

.frame {
    position: absolute;
    width: 380px;
    height: 280px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: 0;
}
#layer1  { background-color: red; color: #fff; }

Aber das sind meine Ergebnisse:

$(".frame").filter(":first").width();//384
$(".frame").filter(":first").outerWidth(); //384
$(".frame").filter(":first").innerWidth(); //384

Ich verstehe, dass sie alle gleich sind, da meine Padding und Ränder 0 sind, aber woher kommt dieses Standard 4px?

2
hinzugefügt bearbeitet
Ansichten: 1
Welche Breite wird vom FireBug/Chrome-Element-Inspector gemeldet?
hinzugefügt der Autor Salman A, Quelle
Versuchen Sie Folgendes: box-sizing: border-box um sicherzustellen, dass es genau 380px ist, sogar mit Polsterung.
hinzugefügt der Autor Derek 朕會功夫, Quelle
Es ist alles meine Schuld!! Danke für die Hilfe. Ich hatte etwas anderes, das eine Addition von 4 zur Gleichung lief!
hinzugefügt der Autor JeroenEijkhof, Quelle
Ich bekomme 380 in Chrome, Firefox und IE: jsbin.com/isehud Beachten Sie auch, dass dies nicht nötig ist die .filter (": first") , jQuery getters erhalten immer nur vom ersten Element in der Menge. (Und wenn Sie tun mussten, ist .first() und nicht .filter (": first")) wahrscheinlich der bessere Weg zu gehen, oder .eq (0) .)
hinzugefügt der Autor T.J. Crowder, Quelle
hinzugefügt der Autor Fabrício Matté, Quelle
Wenn alle .frame-Elemente genau 380 Pixel groß sein müssen und Sie mit anderen Stilregeln kollidieren, ändern Sie die Regel in width: 380px! Important;
hinzugefügt der Autor nbrooks, Quelle
für mich gibt es 380 in jsfiddle und Chrome. Welche Browser benutzen Sie und ist dieses Phänomen einzigartig für diesen/diese Browser/s oder erscheint es auch in anderen Browsern?
hinzugefügt der Autor jakee, Quelle

1 Antworten

Es wurde gelöst, danke für Ihre Antworten - es hat geholfen!

Hatte etwas anderes eine Ergänzung zu der Gleichung. Fühle dich blöd, wenn du das fragst, aber deine Antworten und Fragen haben mir geholfen, es zu Ende zu bringen! Ich hätte das ganze Skript posten sollen:

var layers = $(".frame");
console.log(layers);

var totalWidth = layers.size() + layers.filter(":first").innerWidth();
console.log(totalWidth);

Wie Sie sehen, liegt das Problem in layers.size() + , es hätte Multiplikation und keine Addition sein sollen und ich hätte es früher sehen sollen.

0
hinzugefügt
"Bitte lesen Sie die Bearbeitung in Frage für den Abschluss." Es ist völlig in Ordnung Beantworten Sie Ihre eigene Frage . Der richtige Weg, dies zu tun, besteht darin, die Frage als eine Frage zu belassen und die Antwort in einer Antwort zu posten. Oder in diesem Fall, da es nur ein Fehler war, können Sie Ihre Frage mit der Bitte an die Moderatoren stellen, sie vollständig zu entfernen, wenn Sie möchten.
hinzugefügt der Autor T.J. Crowder, Quelle