jQuery.height() cư xử khác nhau trong WebKit và Firefox khi sử dụng hộp kích thước: cửa hộp

Question

Tôi có một textarea với phong cách sau đây áp dụng:

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

Nếu tôi sau đó chạy javascript/code jquery sau , chiều cao textarea của tôi bị giảm đi một nửa sử dụng Safari (5.0.6) và Chrome (16.0.x):

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

Theo các tài liệu jQuery cho .height(), đây là hành vi dự kiến ​​vì .height () trả về chiều cao nội dung (không có đệm, đường viền), bất kể thuộc tính kích thước hộp, nhưng .height (value) đặt kích thước nội dung chiếm thuộc tính kích thước hộp. Vì vậy, nếu văn bản của tôi có chiều cao nội dung: 17px và chiều cao đệm: 15px, .height() sẽ trả về 17px. Sau đó, nếu tôi đặt .height (17) văn bản của tôi đã từng cao 32px hiện chỉ cao 17px.

Ứng dụng trong thế giới thực của tôi đang sử dụng jQuery.fn.autoResize 1.14 (https://github.com/padolsey/jQuery.fn.autoResize) trên văn bản có kích thước hộp được áp dụng. Mã đó kéo một diễn viên đóng thế tương tự với những gì tôi đã mô tả ở trên.

Nó hoạt động tốt trong FireFox 10 (Tức là, chiếm FireFox cho hộp kích thước một cách đối xứng hơn khi nhận và thiết lập chiều cao.)

Câu hỏi của tôi là: Đâu là lỗi, và ở đâu nên tôi tìm/đề xuất cách giải quyết? Plugin jQuery.fn.autoResize, nhóm jQuery, webkit hoặc FireFox?

Answer 1

Lỗi là trong jQuery (http://bugs.jquery.com/ticket/11004) mà làm cho $(el).height() không chiếm box-sizing tài sản. Sửa chữa được lên kế hoạch để đi ra ngoài trong v1.8, tuy nhiên trong thời gian có nghĩa là bạn có thể sử dụng $(el).outerHeight() để có được chiều cao của hộp kế toán cho đệm và biên giới (http://api.jquery.com/outerHeight/).

Answer 2

Lỗi trong tính toán jQuery.

Giải pháp:

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

Nếu bạn có biên giới - cũng tính toán cho họ