javascript - Nivo Slider 转换无法正确呈现并增加网页长度

Question

我正在使用 Rails 3.2 开发一个应用程序，并尝试将 Nivo Slider 添加到首页。加载后，转换看起来像 this .其他转换也有类似的扭曲。

当第一个转换发生时，页面的长度增加了数千像素。我确定是 #slider div 的大小在增加。这偶尔会重置，但后来我看到它再次重新绘制了数千个像素。

包含 Nivo slider 的 div:

<div id="content">
<link href="/assets/nivo-slider-themes/default/default.css?body=1" media="screen" rel="stylesheet" type="text/css" />
  <div class="slider-wrapper theme-default">
  <div class="ribbon"></div>
  <div id="slider" class="nivoSlider">
    <img src="assets/index_slider_1.jpg">
    <img src="assets/index_slider_2.jpg">
    <img src="assets/index_slider_3.jpg">
  </div>
  <div id="htmlcaption" class="nivo-html-caption">
  </div>
</div>

我使用的是 Nivo Slider 3.1 附带的默认打包 CSS 文件。

JSFiddle containing the problem

是什么导致转换损坏，以及由于 slider div 的长度增加而导致页面长度增加？

Answer 1

您使用的来自 Nivo 的 CSS 文件导致了错误。我从其中一个 Nivo 示例中抓取了一个样式表并将 jsfiddle 更新为:http://jsfiddle.net/ppDhT/

<link rel='stylesheet' id='nivoslider-css'  href='http://nivo.dev7studios.com/wp-content/plugins/nivo-slider/scripts/nivo-slider/nivo-slider.css?ver=3.4.2' type='text/css' media='all' />