Question

为什么在following code .height（）中返回95而不是100，而.width（）按预期返回200？我使用的是Firefox 3.6.3。

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！

任何人都可以解释这种行为吗？

Answer 1

有一些用于计算高度和宽度的jQuery方法。尝试使用outerHeight()

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

.outerHeight( [ includeMargin ] )

includeMargin - 一个布尔值指示   是否包含元素   计算边际。

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

.innerHeight()

此方法返回的高度   元素，包括顶部和底部   填充，以像素为单位。

编辑：调整td元素的高度（）以包含默认填充（1px）。计算出的尺寸实际上是......

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

您应该将默认填充设置为0px以避免这些问题。

table td {
    padding: 0;
}

编辑2：这似乎是一个浏览器问题（可能与渲染引擎计算表格维度的方法有关）。这种行为的影响因浏览者而异。你应该找到一个使用div的替代无表格解决方案。

Answer 2

我无法比John更好地解释这种行为，但由于浏览器的不一致性仍然存在（至少对那些无法升级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，具体取决于您的需求。

Answer 3

我不确定这个......我也觉得它很奇怪..这是我的猜测。

边界占用实际高度，计算高度时被jquery忽略

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

3 个答案: