jQuery.Höhe() verhält sich anders als in WebKit und Firefox bei der Verwendung von box-sizing:border-box

Ich habe eine textarea mit dem folgenden Format:

textarea {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}

Wenn ich dann führen Sie den folgenden javascript - /jquery-code, meine textarea-Höhe wird geschnitten in der Hälfte, die mit Safari(5.0.6) und Chrom(16.0.x):

$('textarea').each( function() {
    var $this = $(this);
    $this.height( $this.height() );
}

Nach den jQuery docs für .Höhe(), dies ist das erwartete Verhalten, weil .height() gibt die content-Höhe (kein padding, border), unabhängig von der box-sizing-Eigenschaft, aber .Höhe( Wert ) setzt die Größe des Inhalts Buchhaltung für der box-sizing-Eigenschaft. Also, wenn meine textarea-content-height:17px und Polsterung-Höhe:15px, .Höhe() zurück 17px. Dann, wenn ich eingestellt habe .Höhe(17) meine textarea, die verwendet werden, um 32px hoch ist jetzt nur 17px hoch.

Meine real-world-Anwendung wird mithilfe von jQuery.fn.autoResize 1.14 (https://github.com/padolsey/jQuery.fn.autoResize) auf Texteingabefelder, die box-sizing angewendet. Code zieht einen ähnlichen stunt zu dem, was ich oben bereits beschrieben haben.

Es funktioniert gut in FireFox 10. (Das ist FireFox accounts für box-sizing in einer mehr symmetrischen Weise, wenn immer und Einstellung der Höhe.)

Meine Frage ist: Wo ist der Fehler, und wo sollte ich suchen/vorschlagen einen workaround? Die jQuery.fn.autoResize-plugin, das jQuery-team, webkit oder FireFox?

  • Würde die Verwendung von jQuery('#container').outerHeight(); funktionieren besser? Ich habe festgestellt, Probleme mit diesem als gut, und es ist schwierig zu Debuggen.
InformationsquelleAutor meriial | 2012-02-01
  1. 5

    Ist der bug im jQuery ( http://bugs.jquery.com/ticket/11004 ), dass macht $(el).height() ohne Berücksichtigung der box-sizing Eigenschaft. Das Update wird voraussichtlich in v1.8, jedoch in der Zwischenzeit können Sie $(el).outerHeight() um die Höhe der box Rechnungswesen für padding und border (http://api.jquery.com/outerHeight/).

    • $.height und $().height sind verschiedene Dinge. Das erstere ist nicht definiert, und eine statische Methode der jQuery letzteres ist eine Instanz-Methode.
    • danke, ich klärte meine Sinne ein bisschen Verwirrung zu vermeiden
    InformationsquelleAutor davethegr8
  2. 4

    Bug in jQuery Berechnungen.

    Lösung:

    var height = $this.outerHeight() - Number($this.css('padding-top').split('px')[0]) - Number($this.css('padding-bottom').split('px')[0]);

    Wenn Sie Grenzen - auch die Berechnung

    • hat dieser berichtet, dass das jquery-team?
    InformationsquelleAutor Rustam
Schreibe einen Kommentar