jQuery.height () ведет себя по-разному в WebKit и Firefox при использовании box-sizing: border-box

Question

У меня есть текстовая область с применением следующего стиля:

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

Если я затем запусту следующий код javascript / jquery, высота моей текстовой области будет уменьшена пополам с помощью Safari (5.0.6) и Chrome (16.0.x):

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

Согласно документации jQuery для .height (), это ожидаемое поведение, поскольку .height () возвращает высоту содержимого (без отступов, рамки) независимо от полясвойство -sizing, но .height (значение) устанавливает размер содержимого , что составляет свойство размера блока.Так что, если моя текстовая область имеет content-height: 17px и padding-height: 15px, .height () вернет 17px.Затем, если я установлю .height (17), моя текстовая область, которая раньше была высотой 32px, теперь имеет высоту только 17px.

Мое реальное приложение использует jQuery.fn.autoResize 1.14 (https://github.com/padolsey/jQuery.fn.autoResize)в текстовых областях, к которым применен размер блока. Этот код выполняет трюк, аналогичный описанному выше.

Он отлично работает в FireFox 10. (То есть FireFox учитывает размер блока в более симметричном виде.способ получения и установки высоты.)

Мой вопрос: где ошибка, и где я должен искать / предложить обходной путь? Плагин jQuery.fn.autoResize, команда jQuery, webkit или FireFox

Answer 1

Ошибка в jQuery (http://bugs.jquery.com/ticket/11004), из-за которой $(el).height() не учитывает свойство box-sizing. Исправление планируется выпустить в v1.8, однако в то же время вы можете использовать $(el).outerHeight() чтобы получить высоту ящика с учетом отступов и бордюра (http://api.jquery.com/outerHeight/).

Answer 2

Ошибка в вычислениях jQuery.

Решение:

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

Если у вас есть границы - также рассчитать их