jQuery.height（）採用箱尺寸時WebKit和Firefox的行爲有所不同：邊界框

我有以下的風格textarea的應用：jQuery.height（）採用箱尺寸時WebKit和Firefox的行爲有所不同：邊界框

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

如果我再運行下面的JavaScript/jQuery代碼，我的textarea的高度得到了一半使用的是Safari（5.0.6）和Chrome（16.0.x）斬：）

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

據jQuery的文檔的.height（，這是正常現象，因爲.height（）返回內容高度（無填充，邊框），而不管框的大小屬性如何，但.height（value）將設置內容尺寸佔箱體施膠性能。所以如果我的textarea的content-height：17px和padding-height：15px，.height（）會返回17px。然後，如果我設置.height（17），我的textarea曾經是32px高，現在只有17px高。

我的真實世界的應用程序在textarea上使用了jQuery.fn.autoResize 1.14（https://github.com/padolsey/jQuery.fn.autoResize），它應用了box-sizing。該代碼拉了一個類似的特技我上面描述的。

它工作正常，在Firefox 10（也就是說，獲取和設置高度時，火狐佔箱尺寸更對稱的方式。）

我的問題是：哪裏是錯誤的，我應該在那裏尋找/提出解決方法？ jQuery.fn.autoResize插件，jQuery團隊，webkit或FireFox？

來源

2012-02-01 meriial

會使用jQuery（'＃container'）。outerHeight（）;工作更好嗎？我也發現了這個問題，調試起來很棘手。 – Jeepstone 2012-02-01 12:51:38

bug是jQuery的（http://bugs.jquery.com/ticket/11004），使$(el).height()不佔box-sizing財產。該修補程序計劃在v1.8中出現，但同時您可以使用$(el).outerHeight()來獲取填充框和邊框的框的高度（http://api.jquery.com/outerHeight/）。

來源

2012-04-16 16:10:15 davethegr8

'$ .height'和'$（）。height'是不同的東西。前者沒有定義，而'jQuery'的靜態方法，後者是一種實例方法。 – 2012-04-16 16:12:33

@RobW - 謝謝，我澄清了一下我的意思，以避免混淆 – davethegr8 2012-04-17 16:18:03

jQuery計算中的錯誤。

解決方案：

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

如果你有邊界 - 也算他們

來源

2012-04-10 15:40:32 Rustam

有沒有向jquery團隊報告？ – davethegr8 2012-04-12 22:33:23

jQuery.height（）採用箱尺寸時WebKit和Firefox的行爲有所不同：邊界框

回答

相關問題