jquery - 为什么 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 宽度属性:

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() 完成的工作，但包括 填充和边距，如 native 浏览器。

简而言之:

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

一个很好的平行例子是:

$(this).css("width")

更接近于

$(this).attr("name")

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

编辑:

这是我刚刚标记的内容，它也说明了区别:

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

警报将是一个数值(像素)。