jQuery .width（）和.height（）奇怪的行爲

爲什麼在following code .height（）返回95而不是100，而.width（）返回200如預期的那樣？我使用Firefox 3.6.3。jQuery .width（）和.height（）奇怪的行爲

HTML：

<table><tr> 
    <td id="my"></td> 
</tr></table> 
<div id="log"></div>

CSS：

#my { 
    border: 5px solid red; 
}

JS：

$("#my").width(200).height(100); 
$("#log").append("Width = " + $("#my").width() + "<br />"); 
$("#log").append("Height = " + $("#my").height());

我試過.outerWidth（）和.outerHeight（），也.innerWidth（）和。 innerHeight（），但沒有一個返回預期結果：code example

但是，如果我設置了position: absolute它看起來much better！

任何人都可以解釋這種行爲嗎？

來源

2010-05-18 Misha Moroshko

在谷歌瀏覽器4.1.249.1064，我得到高度95和寬度195 – hwiechers 2010-05-18 15:05:44

這可能是瀏覽器的問題，或與其它CSS存在的問題。在Google Chrome 6.0.401.1開發中，我獲得了預期的結果。 http://jsbin.com/omefu/2 – Matchu 2010-05-18 15:06:08

@Misha：不一致性正在由表/ TD的默認填充造成的。見下面更新的答案:)。 – 2010-05-18 15:57:01

忽略有幾個jQuery方法計算的高度和寬度。嘗試使用outerHeight()

摘自jQuery的文檔：http://api.jquery.com/outerHeight/

.outerHeight([ includeMargin ])

includeMargin - 布爾值，指示是否包含元素的，在計算保證金。

http://api.jquery.com/innerHeight/

.innerHeight()

此方法返回元件，包括頂部和底部填充，以像素爲單位的高度。

編輯：設定高度（）中的TD-元件上被調整以包括缺省填充（1像素）。的計算尺寸實際上是...

alt text http://files.wordofjohn.com/with_border.png

您應該設置默認邊距爲0px以避免這些問題。

table td { 
    padding: 0; 
}

編輯2：這似乎是一個瀏覽器的問題（可能是一些涉及到計算表的尺寸的渲染引擎的方法）。這種行爲的影響會因瀏覽器而異。你應該找到一個使用div的替代的無表格解決方案。

來源

2010-05-18 15:07:23

外部和內部功能在這裏沒有幫助。查看更新的問題。 – 2010-05-18 15:20:13

我試圖設置'td'的填充= 0，但它沒有幫助。看到更新後的問題。 – 2010-05-18 16:36:35

這正是我想要做的：使用'div's找到另一個解決方案:) – 2010-05-18 17:13:34

我不知道這個..我也覺得它很奇怪..這是我的猜測。

邊境吃成實際的高度，並通過jQuery的同時計算高度

來源

2010-05-18 15:05:28 ZX12R

現代盒子模型不這樣做。也許這是一個IE6的問題......但不應該是190和90，如果是這樣的話？ – Matchu 2010-05-18 15:07:29

是你有一個有效的點 – ZX12R 2010-05-18 15:20:05

的問題是，爲什麼寬度和高度的行爲不同。我希望兩者都包含或不包含邊界/填充/邊距。 – 2010-05-18 15:21:36

我真的不能解釋這種行爲比約翰，但由於該瀏覽器的不一致仍然存在（至少對於那些誰不能升級jQuery的版本），我想我會分享的辦法解決這個問題。

使用HTML DOM屬性clientHeight和clientWidth似乎是在大多數瀏覽器是一致的。

$("#my").width(200).height(100); 
$("#log").append("Width = " + $("#my").attr("clientWidth") + "<br />"); 
$("#log").append("Height = " + $("#my").attr("clientHeight"));

也可能是您想要使用offsetHeight/offsetWidth取而代之，這取決於您的需要。

來源

2016-01-21 01:07:07 user2257275

jQuery .width（）和.height（）奇怪的行爲

回答

相關問題