为什么jQuery.css('width')在不同的浏览器中返回不同的值？

Question

我写了一些jQuery代码,它读取表中列的宽度并将它们应用到另一个表中.

在我的页面上,有一个这样的表:

<table style='table-layout:fixed;'>
     <tbody id='myTableBody'>
         <tr>
             <td style='width:100px;'>foo</td>
             <td style='width: 40px;'>bar</td>
         </tr>
     </tbody>
</table>

我编写了以下jQuery代码来读取此表的css width属性:

var colWidths = [];
var cells = $('#myTableBody').find('td');
for (i = 0; i < cells.length; i++)
    colWidths.push($(cells[i]).css('width'));

代码运行后,我希望colWidths是[100, 40],而在FireFox中,它是.但是,在IE8中,它是[92,32].这会在IE中打破我的页面,这取决于正确的值.

我相信我的表包含在jQuery-ui-tabs元素中可能是相关的,我知道jQuery-ui css可以做奇怪的事情,所以如果这与它有关,我不会感到惊讶.

为什么jQuery.css('width')没有返回我在IE8中期望的值？我能做些什么呢？

Answer 1

JQuery通过这种情况规范化浏览器处理$().width().

css("width")是一个不规范化的不同属性/属性,而是检索元素的CSS值. width()是"dom中的实际大小",但在适用的情况下不考虑填充和边距,css("width")只检索CSS值.正如其他人在下面提到的这个答案,.outerWidth()将完成所做的.width()事情,但包括本机浏览器所代表的填充和边距.

简而言之:

$(this).width() != $(this).css("width")

一个很好的并行示例如下:

$(this).css("width")

更接近

$(this).attr("name")

比$(this).width()或$(this).height().

编辑:

这是我刚刚选中的内容,并看到了这也说明了不同之处:

$(this).css("height", "auto");
alert($(this).height());

警报将是数值(像素).