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

ada*_*ign 4 safari jquery webkit google-chrome cross-browser

我试图获得正确的容器计算宽度.所有浏览器都正确获得计算出的宽度.(甚至IE)但令人惊讶的是Chrome和webKit浏览器正在获得有线号码.

我试图获得<li>包括其边框和填充+其边距右边的总宽度.

然后将它乘以<li>'s 的长度,得到保持它们所需的确切宽度

我用宽度计算来追踪问题.

任何人都可以告诉我什么是错的.

谢谢

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>
Run Code Online (Sandbox Code Playgroud)

JS

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....
Run Code Online (Sandbox Code Playgroud)

beltTotalWidth在webKit中具有不同的值.

Gab*_*oli 16

你是来自这个吗?

$(document).ready(...)

如果是这样尝试使用

$(window).load(...)

  • 这应该可以解决您的问题.在chrome中,它获得了前映像宽度.你想要加载图像后的宽度,这就是`$(window).load(...)`会给你的. (2认同)
  • 你的图像是固定大小的吗?如果是这样,请将它们的宽度/高度尺寸添加到css规则或样式中并再试一次..也许如果将尺寸输入浏览器,它将正确计算它. (2认同)