jcarousellite - IE8滚动间距问题

Question

我有 jcarousellite 插件在网页（http://www.marketscout.com/various_sites/symposium11/）中运行。它垂直滚动基于文本和图像的内容。我的一切都按照我想要的方式显示，但问题是 IE8 中的滚动从零位置 [li] 标记开始向上几个像素。所以它实际上从最后一个 [li] 开始，并导致每个 [li] 上的停止点稍微倾斜。

我给每个 [li] 加上了红色边框，这样你就可以看到起点稍微偏离了。任何让它像 Firefox 中那样做出反应的帮助都会很棒。在 Firefox 中，滚动条从第一个 [li] 的顶部边框开始，当它移动到下一个 [li] 时，在顶部边框停止。由于某种原因，看起来 IE8 正在欺骗 jcarousellite .js 文件中发生的数学运算。我是一个十足的 JQuery 菜鸟，但我将下载中的所有 .js 文件放入我的文件结构中。

jcarousellite_1.0.1c4.js、jcarousellite_1.0.1.pack.js、& jcarousellite_1.0.1.min.js

我认为考虑到 IE 中的额外像素空间有时会在 css 中添加边距来解决问题。但事实并非如此。轮播的 CSS 包含在下面。

#newsticker-demo { width:280px; 

内边距：5px 5px 0； 字体系列：Verdana、Arial、Sans-Serif； 字体大小：12px； 边距：0px 自动； 边框：0px 纯蓝色； 高度：295 像素； }

newsticker-demo a { 文本装饰：无； }

newsticker-demo img { 边框：0px 实心#FFFFFF; }

newsticker-demo .title {

文本对齐：中心； 字体大小：13px； 字体粗细：粗体； 底部填充：10px； 底部填充：8px\9； } .newsticker-jcarousellite { 宽度：270px; } .newsticker-jcarousellite li.njl { 列表样式：无；显示：块；底部填充：3px；边距：0 像素；下边距：-2px\9；边框：1px 纯红色；高度：62px；高度：64px； } .newsticker-jcarousellite .thumbnail { 浮动：左；宽度：60px；高度：60 像素；边框：0px实线#FFFFFF； } .newsticker-jcarousellite .info { float:right;宽度：200px；高度：60 像素；边框：0px实线#FFFFFF； } .newsticker-jcarousellite .info span.cat { 显示：块；字体大小：10px；颜色：#808080； } .clear { 清除：两者；这

是 javascript：

    $(function() {
    $(".newsticker-jcarousellite").jCarouselLite({
        vertical: true,
        hoverPause:true,
        visible: 4,
        start: 0,
        auto:1500,
        speed:2000
    });
});

这是 HTML：

<div id="newsticker-demo">    
    <div class="title">2011 Symposium Speakers</div>
    <div class="newsticker-jcarousellite">
        <ul>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/RossBuchmuellersm.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#RossBuchmueller">Ross Buchmueller</a>
                <br/>President and CEO<br/>PURE Risk Management</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/Speaker60.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#RobByler">Rob Byler</a>
                <br/>President<br/>QBE</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/Speaker60.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#PeterEastwood">Peter Eastwood</a>
                <br/>CEO<br/>Lexington Insurance</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/RickGulliversm.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#RichardGulliver">Richard Gulliver</a>
                <br/>President<br/>HUB International</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/AlanKaufmansm.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#AlanKaufman">Alan Kaufman</a>
                <br/>Chairman, President, & CEO<br/>Burns & Wilcox</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/Speaker60.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#RichardKerr">Richard Kerr</a>
                <br/>Founder and CEO<br/>MarketScout</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/Speaker60.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#MichaelHLee">Michael H. Lee</a>
                <br/>Chairman, President and CEO<br/>Tower Group Companies</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/Speaker60.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#JayPoorman">Jay Poorman</a>
                <br/>Managing Director<br/>StoneRidge Advisors, LLC</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/Speaker60.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#SusanRivera">Susan Rivera</a>
                <br/>CEO<br/>V3</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/Speaker60.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#DougTeegan">Doug Teegan</a>
                <br/>Managing Director<br/>Lloyd's America, Inc.</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/HankWatkinssm.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#HankWatkins">Hank Watkins</a>
                <br/>President<br/>Lloyds America, Inc.</span>
            </div>
            <div class="clear"></div>
        </li>

        </ul>
    </div>
</div>  

提前感谢您的帮助！

Answer 1

找到CSS中提供的代码：

.newsticker-jcarousellite ul li{
    list-style:none;
    display:block;
    padding-bottom:1px;
    margin-bottom:5px;
    height:180px;  /*added code for setting height */
}

也在脚本功能中设置：

<script type="text/javascript">
$(function() {
    $(".newsticker-jcarousellite").jCarouselLite({
        vertical: true,
        hoverPause:true,
        visible: 2,
        auto:100,
        speed:1000,
        height:180  /*added code for setting height */
    });
});
</script>

您只需在CSS的这部分设置高度系数即可。