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

Question

我有一个malsup的真棒jQuery循环运行的页面.我使用的是最新版本(2.99)和Safari 5.0.5.我以前没有遇到过以下问题,看起来有点奇怪.

问题

有时,当页面加载时,.slides元素只有654像素宽.我把它设置为css文件中的960px.但是,当我使用JavaScript来获取.slides元素的宽度时,它表示宽度为1271px.咦？这个问题偶尔会出现在Firefox(3.6.16)上,但没有Safari那么近.奇怪的是,我似乎无法在IE8中复制此错误.

我的代码都是W3C有效(除了3次调用border-radius).使用表单元素作为循环容器可能存在限制吗？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;
    }

你可以(希望)在这里看到"bug" .我很想知道其他人是否没有这样做(可能需要多次推F5).

我很想解决这个烦人的小虫子.在循环之后设置容器宽度的解决方法已经调整它(错误的宽度,毫无疑问)只能解决问题的一半.移动到下一张幻灯片后,它会将宽度减半.下一张幻灯片,它再次将它减半.因此,在幻灯片3之后,它将所有内容调整到240px宽.

我想解决这个问题的方法是强制每个人都使用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());
     },   
  });

Answer 2

这似乎确实是 jQuery Cycle 的一个错误。我无法判断这是因为浮动子元素还是因为发生这种情况时页面上通常有多个 jQuery Cycle 实例。我需要更深入地挖掘。

对我有用的一种解决方法是在选项中设置容器的height和，然后指定幻灯片必须是容器，如下所示：widthcyclefit

 $('#myCycle').cycle({
      fx: 'scrollHorz',
      width: 430,
      height: 100,
      fit: 1
 });