.width（）没有给出一致的结果

我得到了同样的selector.width()的两个不同的值，我试图找出如何/为什么。.width（）没有给出一致的结果

伪代码：

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

我有切换$('#wrapper').width()和$(window).width()之间的列表项的宽度的链接。或多或少地定期查看全屏和后退。如果#wrapper是固定宽度（例如，width=500px），则一切正常。

但是，如果包装是（例如）width:50%那么我会得到意想不到的结果。当我第一次显示页面时，.width没问题（阅读：正确）。也就是说，prev/next控件等正确排列。如果我切换到全屏，然后再返回到常规视图，则.width的值将少于几个像素。我试过width=X%不同的值为X和差异的变化。也就是说，它不是固定的。

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

此外，我有一个$(window).resize(function()，如果我轻轻推动窗口一点，然后宽度读数纠正自己。即使我在底部打开Firebug也会修复它自己。

我明白伪代码是模糊的。我只是希望得到一些想法和方向，以便我能够指出问题所在，以便我可以解决它。

来源

2012-07-21 Chief Alchemist

很难说，但你也应该查看父元素的position（）和offset（）属性。 – defau1t 2012-07-21 17:18:18

包装纸是如何布置的（定位，漂浮还是流动）？ – 2012-07-21 17:20:31

看看这是否有所帮助http://stackoverflow.com/questions/11530237/window-outerwidth-vs-window-outerwidth – fortuneRice 2012-07-21 17:43:43

jQuery的.WIDTH（）拉CSS宽度，而不是计算宽度，占填充，边框等获得元素的真实宽度，你应该使用

document.getElementById('myElement').offsetWidth

例子，显示在结果的差异：~~所有的http://jsfiddle.net/xixao/DNbqu/~~

来源

2012-07-23 16:38:23 Steve

这个jsfiddle似乎没有包含任何与此对话相关的内容。 – eremzeit 2014-02-22 05:22:33

似乎小提琴被某种程度的劫持。我不知道iframe是关于什么的。 – Steve 2014-02-28 14:44:38

首先，我鼓励你解决这个问题，添加/删除类到wides列表中100％不窗口宽度的包装元素。

.fullscreen { 
    width: 100%; 
} 

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

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

再一次，第一个解决方案应该没问题。

干杯！

来源

2012-07-23 17:24:16 AlessMascherpa

.width（）没有给出一致的结果

回答

相关问题