newsticker-demo a {text-decoration：none; }

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，＆amp; jcarousellite_1.0.1.min.js

我认为考虑额外的像素空间IE会在css中引入边距有时会解决问题。但事实并非如此。旋转木马的CSS包括在下面。

#newsticker-demo { width:280px;

填充：5px 5px 0; FONT-FAMILY：宋体，Arial字体，无衬线; 字体大小：12像素; 保证金：0px auto; 边框：0px纯蓝色; 高度：295px; }

newsticker-demo a {text-decoration：none; }

newsticker-demo img {border：0px solid #FFFFFF; }

newsticker-demo .title {

文本对齐：中心; 字体大小：13像素; 字体重量：粗体; 填充底：10px的; 填充底：8像素\ 9; } .newsticker-jcarousellite {width：270px; } .newsticker-jcarousellite li.njl {list-style：none;显示：块;填充底：3px的;保证金：0px; margin-bottom：-2px \ 9;边框：1px纯红色;高度：62px;高度：64PX; } .newsticker-jcarousellite .thumbnail {float：left;宽度：60像素;身高：60px; border：0px solid #FFFFFF; } .newsticker-jcarousellite .info {float：right;宽度：200像素;身高：60px; border：0px solid #FFFFFF; } .newsticker-jcarousellite .info span.cat {display：block;字体大小：10px的;颜色：＃808080; } .clear {clear：both; }

这是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的这一部分设置高度因子。

jcarousellite - IE8滚动间距问题

newsticker-demo a {text-decoration：none; }

newsticker-demo img {border：0px solid #FFFFFF; }

newsticker-demo .title {

1 个答案: