jQuery .width()和.height()奇怪的行为

Question

为什么在以下代码中 .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(),但它们都没有返回预期的结果:代码示例

但是,如果我设置position: absolute它看起来好多了!

谁能解释这种行为？

Answer 1

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

摘自jQuery Docs: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的替代无表格解决方案.