jquery - .width() 没有给出一致的结果

Question

我为同一个 selector.width() 得到了两个不同的值，我尝试找出原因/原因。

伪代码:

<div id="wrapper">
<ul>
<li>...</li>
</ul>
</div>

我有一个链接，可以在 $('#wrapper').width() 和 $(window).width() 之间切换列表项的宽度。或多或少常规 View 全屏和返回。如果#wrapper是固定宽度(例如width=500px)，一切都很好。

但是，如果包装器是(例如)width:50%，那么我会得到意想不到的结果。当我第一次显示页面时， .width 很好(读:正确)。也就是说，上一个/下一个控件等正确排列。如果我切换到全屏，然后再次返回到常规 View ，则 .width 值会少几个/几个像素。我尝试过使用不同的 X 值来设置 width=X% ，并且差异发生了变化。也就是说，它不是固定的。

填充和边距设置为零，所以我认为不是这样。

此外，我有一个 $(window).resize(function() ，如果我稍微插入窗口，宽度读数就会自行纠正。即使我在底部打开 Firebug自行修复。

我知道伪代码很模糊。我只是希望得到一些想法和方向，了解如何查明问题所在，以便解决它。

Answer 1

首先，我鼓励您通过向包装元素添加/删除一个类来解决此问题，该类将列表宽度扩大到 100%，而不是窗口宽度。

.fullscreen {
  width: 100%;
}

// on X event
$('#wrapper').addClass('fullscreen');
// on -X event
$('#wrapper').removeClass('fullscreen');

如果您不遵循之前的解决方案...还有其他方法。该问题可能与 box-sizing 有关。 。这意味着 jQuery 可能认为宽度是一回事，而浏览器可能认为是另一回事。在这种情况下，我认为你应该使用 $('X').outerWidth()而不是 $('X').width()。

同样，第一个解决方案应该没问题。

干杯!