jcarousellite - проблема с пространством прокрутки в IE8 - PullRequest
Новая
       38

jcarousellite - проблема с пространством прокрутки в IE8

0 голосов
/ 22 февраля 2011

У меня есть плагин jcarousellite, работающий на веб-странице (http://www.marketscout.com/various_sites/symposium11/). Он прокручивается вертикально с текстовым и графическим содержимым. У меня все выглядит так, как я хочу, но проблема в том, что прокрутка в IE8 начинается на несколько пикселей выше нуля тег position [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 сплошной синий; высота: 295px; }

newsticker-demo a {text-ornament: none; }

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

newsticker-demo .title {

выравнивания текста: центр; Размер шрифта: 13px; начертание шрифта: жирный; обивка-дно: 10px; обивка дна: 8px \ 9; } .newsticker-jcarousellite {ширина: 270px; } .newsticker-jcarousellite li.njl {стиль списка: нет; Дисплей: блок; обивка-дно: 3px; поле: 0px; нижнее поле: -2px \ 9; граница: 1px сплошной красный; высота: 62px; высота: 64px; } .newsticker-jcarousellite .thumbnail {float: left; ширина: 60px; высота: 60 ​​пикселей; граница: 0px solid #FFFFFF; } .newsticker-jcarousellite .info {float: right; ширина: 200px; высота: 60 ​​пикселей; граница: 0px solid #FFFFFF; } .newsticker-jcarousellite .info span.cat {display: block; Размер шрифта: 10px; цвет: # 808080; } .clear {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>

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

1 Ответ

1 голос
/ 11 апреля 2011

Найти код в 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.

...