Цикл jQuery, кажется, регулирует высоту моего элемента

У меня есть страница с запущенным потрясающим циклом jQuery malsup. Я использую последнюю версию (2.99) и Safari 5.0.5. Я раньше не сталкивался со следующей проблемой, и это кажется немного странным.

Проблема

Иногда, когда страница загружается, элемент .slides имеет ширину всего 654 пикселя. Я установил значение 960 пикселей в файле css. Но когда я использую JavaScript для получения ширины элемента .slides , он говорит, что его ширина составляет 1271 пикселей. А? Эта проблема иногда возникает и в Firefox (3.6.16), но далеко не так сильно, как в Safari. Как ни странно, похоже, что я не могу воспроизвести эту ошибку в IE8.

Весь мой код действителен для W3C (кроме трех вызовов 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;
    }

Вы можете (надеюсь) увидеть "ошибку" в действии здесь . Я хотел бы знать, не происходит ли это с кем-нибудь еще (возможно, придется нажать F5 несколько раз).

Я бы хотел исправить эту досадную маленькую ошибку. Обход установки ширины контейнера после того, как цикл отрегулировал ее (без сомнения, на неправильную ширину), решает только половину проблемы. Когда вы переходите к следующему слайду, ширина уменьшается вдвое. На следующем слайде он снова делит его вдвое. Итак, после слайда 3 он сжимает весь контент до ширины 240 пикселей.

Думаю, решением этой проблемы было бы заставить всех использовать Firefox / IE (он будет находиться во внутренней сети компании).

Спасибо за любую помощь. и понимание заранее!

Дэн

РЕДАКТИРОВАТЬ

$(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;
    }

Вы можете (надеюсь) увидеть "ошибку" в действии здесь . Я хотел бы знать, не происходит ли это с кем-либо еще (возможно, придется нажать F5 несколько раз).

Я бы хотел исправить эту досадную маленькую ошибку. Обход установки ширины контейнера после того, как цикл отрегулировал ее (без сомнения, на неправильную ширину), решает только половину проблемы. Когда вы переходите к следующему слайду, ширина уменьшается вдвое. На следующем слайде он снова делит его вдвое. Итак, после слайда 3 он сжимает весь контент до ширины 240 пикселей.

Думаю, решением этой проблемы было бы заставить всех использовать Firefox / IE (он будет находиться во внутренней сети компании).

Спасибо за любую помощь. и понимание заранее!

Дэн

РЕДАКТИРОВАТЬ

$(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;
    }

Вы можете (надеюсь) увидеть "ошибку" в действии здесь . Я хотел бы знать, не происходит ли это с кем-либо еще (возможно, придется нажать F5 несколько раз).

Я бы хотел исправить эту досадную маленькую ошибку. Обход установки ширины контейнера после того, как цикл отрегулировал ее (без сомнения, на неправильную ширину), решает только половину проблемы. Когда вы переходите к следующему слайду, ширина уменьшается вдвое. На следующем слайде он снова делит его вдвое. Итак, после слайда 3 он сжимает весь контент до ширины 240 пикселей.

Думаю, решением этой проблемы было бы заставить всех использовать Firefox / IE (он будет находиться во внутренней сети компании).

Спасибо за любую помощь. и понимание заранее!

Дэн

ИЗМЕНИТЬ Я хотел бы знать, не происходит ли это ни с кем другим (возможно, придется нажать F5 несколько раз).

Я бы хотел исправить эту досадную маленькую ошибку. Обход установки ширины контейнера после того, как цикл отрегулировал ее (без сомнения, на неправильную ширину), решает только половину проблемы. Когда вы переходите к следующему слайду, ширина уменьшается вдвое. На следующем слайде он снова делит его вдвое. Итак, после слайда 3 он сжимает весь контент до ширины 240 пикселей.

Думаю, решением этой проблемы было бы заставить всех использовать Firefox / IE (он будет находиться во внутренней сети компании).

Спасибо за любую помощь. и понимание заранее!

Дэн

ИЗМЕНИТЬ Я хотел бы знать, не происходит ли это ни с кем другим (возможно, придется нажать F5 несколько раз).

Я бы хотел исправить эту досадную маленькую ошибку. Обход установки ширины контейнера после того, как цикл отрегулировал ее (без сомнения, на неправильную ширину), решает только половину проблемы. Когда вы переходите к следующему слайду, ширина уменьшается вдвое. На следующем слайде он снова делит его вдвое. Итак, после слайда 3 он сжимает весь контент до ширины 240 пикселей.

Думаю, решением этой проблемы было бы заставить всех использовать Firefox / IE (он будет находиться во внутренней сети компании).

Спасибо за любую помощь. и понимание заранее!

Дэн

ИЗМЕНИТЬ без сомнения) решает только половину проблемы. Когда вы переходите к следующему слайду, ширина уменьшается вдвое. На следующем слайде он снова делит его вдвое. Итак, после слайда 3 он сжимает весь контент до ширины 240 пикселей.

Думаю, решением этой проблемы было бы заставить всех использовать Firefox / IE (он будет находиться во внутренней сети компании).

Спасибо за любую помощь. и понимание заранее!

Дэн

РЕДАКТИРОВАТЬ без сомнения) решает только половину проблемы. Когда вы переходите к следующему слайду, ширина уменьшается вдвое. На следующем слайде он снова делит его вдвое. Итак, после слайда 3 он сжимает весь контент до ширины 240 пикселей.

Думаю, решением этой проблемы было бы заставить всех использовать Firefox / IE (он будет находиться во внутренней сети компании).

Спасибо за любую помощь. и понимание заранее!

Дэн

РЕДАКТИРОВАТЬ обновленная ссылка: https://necms.com.au/cycle_oddities.php