webkit 浏览器正在获取 elements.width() 错误答案

【问题标题】：webkit browsers are getting elements.width() wrongwebkit 浏览器正在获取 elements.width() 错误
【发布时间】：2011-01-15 22:34:25
【问题描述】：

我正在尝试获取容器的正确计算宽度。所有浏览器都正确获得了计算的宽度。（甚至 IE）但令人惊讶的是 Chrome 和 webKit 浏览器正在获得有线号码。

我正在尝试获取 <li> 的总宽度，包括它的边框和填充 + 它的边距。

然后将其乘以 <li> 的长度，以获得容纳它们所需的确切宽度

我找到了宽度计算的问题。

谁能告诉我怎么了。

谢谢

HTML

 <div id="videoTotorialTumbs">
    <a href="#" id="thumbLeftArrow" class="inActive"></a>
   <a href="#" id="thumbRightArrow"></a>
      <div id="horizontalBelt">
        <ul style="width: 1056px;">
            <li><a rel="video1" href="#"><img src="http://dummyimage.com/110x90.jpg">     <span>Upload images</span></a></li>
            <li><a rel="video2" href="#"><img src="http://dummyimage.com/110x90.jpg"><span>Choose Theme</span></a></li>

        </ul>
    </div>
</div>

var videoContext = $("#horizontalBelt"),
 videoBeltUL = videoContext.find("ul"),
 videoBeltLI = videoContext.find("li"),
 videoLength = videoBeltLI.length,
 videoWidth  = parseInt(videoBeltLI.eq(0).outerWidth())+parseInt(videoBeltLI.eq(0).css("marginRight")),
 beltTotalWidth = videoLength*videoWidth,
       // js goes on....

beltTotalWidth 在 webKit 中具有不同的值。

【问题讨论】：

标签： jquery safari cross-browser google-chrome webkit

【解决方案1】：

你是从这里打电话的吗

$(document).ready(...)?

如果是这样，请尝试使用

$(window).load(...)

【讨论】：

这应该可以解决您的问题。在 chrome 中，它正在获取预图像宽度。您想要加载图像后的宽度，这是 $(window).load(...) 将给您的。
你的图片是固定尺寸的吗？如果是这样，将它们的宽度/高度尺寸添加到 css 规则或样式中，然后重试..也许如果将尺寸提供给浏览器，它将正确计算..
太好了，这很有帮助。再次感谢

【解决方案2】：

如果您不想等待 window load 事件，则可以改为在每个图像的 load 事件上运行它。正如 Gaby 在评论中所说，如果您知道图像的尺寸，则将 width 属性添加到您的图像中可以让您更早地运行它。

【讨论】：

谢谢，这也很有帮助。