jQuery 循环似乎正在调整我的元素的高度

Question

我有一个页面运行着 malsup 令人敬畏的 jQuery 循环。我使用的是最新版本 (2.99) 和 Safari 5.0.5。之前没遇到过下面的问题，感觉有点奇怪。

问题

有时，当页面加载时，.slides 元素只有 654 像素宽。我在 css 文件中将它设置为 960px。但是当我使用 JavaScript 获取 .slides 元素的宽度时，它说它是 1271px 宽。嗯？这个问题偶尔也会在 Firefox (3.6.16) 上发生，但不会像 Safari 那样频繁。奇怪的是，我似乎无法在 IE8 中重现此错误。

我的代码完全符合 W3C 标准(除了对 border-radius 的 3 次调用)。也许使用表单元素作为循环容器有限制？是 Safari 行为不当吗？

JS:

$(document).ready(function(){
  var sw = $('.slides').width();
  $('.slides').cycle({
    fx: 'scrollHorz',
    nowrap: 0,
    fit: 1,
    timeout: 0,
    next: '.next',
    prev: '.prev',
    speed: 250
  });
  if (sw != 960){
    $('.slides').css('width','960px');//to set the width to 960, so it doesn't clip the form
    $('.slides').css('background-color','#ff00ff');//so i know when the problem is occuring
  }
});

CSS:

#content{
    float:left;
    width:100%;
}

    .wrapme{
        width:960px;
        height:auto;
        margin:0 auto;
    }

    .slides{
        float:left;
        width:960px;
        height:auto;
        overflow:auto;
    }

您可以(希望)看到正在运行的“错误”here .我很想知道这是否不会发生在其他人身上(可能需要按几次 F5)。

我很乐意修复这个烦人的小错误。在循环调整后设置容器宽度的解决方法(毫无疑问，宽度错误)只能解决一半的问题。一旦您移动到下一张幻灯片，它的宽度就会减半。下一张幻灯片，它再次减半。所以在幻灯片 3 之后，它将所有内容压缩到 240 像素宽。

我想解决这个问题的办法是强制每个人都使用 Firefox/IE(它将驻留在公司内部网上)。

提前感谢您的帮助和见解!

丹

编辑 更新链接:https://necms.com.au/cycle_oddities.php

Answer 1

Jquery Cycle 插件有一个错误...我找到的解决方案是设置 after 回调函数并在那里手动设置高度。

$('.slides').cycle({
    fx: 'scrollHorz',
    nowrap: 0,
    fit: 1,
    timeout: 0,
    next: '.next',
    prev: '.prev',
    speed: 250,
    after: function (){
        $(this).parent().css("height", $(this).height());
     },   
  });