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中则为[92,32]。但是，在IE8中，它是{{1}}。这会在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());

警报将是一个数值（像素）。

Answer 2

我遇到了同样的问题，试图检测身体的宽度并加载特定的脚本，我就这样解决了问题。也可以帮到你。

$('body,html').css({'overflow':'hidden'});
var width = $('body').width();
$('body,html').css({'overflow':''});

这为所有主流浏览器提供了一致的价值

`

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

2 个答案: