Горизонтальная панель Jscrollpane возвращается к вертикальной в IE7

когда я просматриваю свой сайт: http://www.testtrack.tv/ в режиме совместимости IE8 горизонтальные панели прокрутки превращаются в вертикальные панели. это не относится к демонстрационному сайту Кевина, поэтому это должно быть что-то в моем CSS.

я использую css по умолчанию из примеров jscrollpane с парой дополнений... я добавил пробел: nowrap. это прекрасно работает везде, кроме IE7, хотя я думал, что это поддерживаемое свойство.

/* Styles specific to this particular page */
.scroll-pane  {
    width: 100%;
    height: 200px;
    overflow: auto;
    white-space:nowrap;
}
.horizontal-only {
    height: auto;
    max-height: 200px;
}

.thumbWrapper {
    margin-right: 10px;
    height: 150px;
    position: relative;
    width: 145px;
    white-space: normal;
    display: inline-block;
    /*hack for IE7 to display as inline-block*/
    zoom: 1;
    *display:inline;
}

где класс thumbWrapper упаковывает изображение и его заголовок в div. может быть, это лучше как элемент li?

моя разметка выглядит так:

<div class="scrollWrapper">
<h2>Editor's Choice</h2>
<p>the TestTrack.Tv team’s pick of the hottest clips...</p>

<div id="cat-48" class="scroll-pane horizontal-only">           

<div class="thumbWrapper">
    <a href="http://www.testtrack.tv/fast-and-furious-5-movie-trailer/">
    <img src='http://www.testtrack.tv/wp-content/uploads/2011/04/0470.jpg' height='81' alt='thumb'/>
    </a>
    <br/><a href="http://www.testtrack.tv/fast-and-furious-5-movie-trailer/">Fast And Furious 5 &#8211; Movie Trailer</a>
</div>

<div class="thumbWrapper">
    <a href="http://www.testtrack.tv/danny-macaskill-way-back-home/">
    <img src='http://www.testtrack.tv/wp-content/uploads/2011/04/0159.jpg' height='81' alt='thumb'/>
    </a>
    <br/><a href="http://www.testtrack.tv/danny-macaskill-way-back-home/">Danny MacAskill &#8211; &#8220;Way Back Home&#8221;</a>
</div>

<div class="thumbWrapper">
    <a href="http://www.testtrack.tv/dakar-2011-carlos-sainz-red-bull-volkswagen-touareg/">
    <img src='http://www.testtrack.tv/wp-content/uploads/2011/04/0678.jpg' height='81' alt='thumb'/>
    </a>
    <br/><a href="http://www.testtrack.tv/dakar-2011-carlos-sainz-red-bull-volkswagen-touareg/">Dakar 2011 &#8211; Carlos Sainz &#8211; Red Bull Volkswagen Touareg</a>
</div>

<div class="thumbWrapper">
    <a href="http://www.testtrack.tv/porsche-959-vs-ferrari-f40-bbc-top-gear/">
    <img src='http://www.testtrack.tv/wp-content/uploads/2011/04/0645.jpg' height='81' alt='thumb'/></a>
    <br/><a href="http://www.testtrack.tv/porsche-959-vs-ferrari-f40-bbc-top-gear/">Porsche 959 vs ferrari F40 &#8211; BBC Top Gear</a>
</div>

</div><!--.scroll-pane-->
</div><!--.scrollWrapper-->

в конечном счете, я ищу исправление, чтобы оно отображалось горизонтально в IE7, как и во всех других браузерах.


jquery jscrollpane jquery-jscrollpane
person helgatheviking    schedule 22.04.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вместо того, чтобы полагаться на nowrap, я бы предложил добавить элемент внутри вашей панели прокрутки и явно установить его ширину. Как вы сказали, UL был бы хорошим кандидатом. например

<div id="cat-48" class="scroll-pane horizontal-only">      
    <ul>
        <li>
            <a href="http://www.testtrack.tv/fast-and-furious-5-movie-trailer/">
            <img src='http://www.testtrack.tv/wp-content/uploads/2011/04/0470.jpg' height='81' alt='thumb'/>
            </a>
            <br/><a href="http://www.testtrack.tv/fast-and-furious-5-movie-trailer/">Fast And Furious 5 &#8211; Movie Trailer</a>
        </li>
        <li>
            <a href="http://www.testtrack.tv/danny-macaskill-way-back-home/">
            <img src='http://www.testtrack.tv/wp-content/uploads/2011/04/0159.jpg' height='81' alt='thumb'/>
            </a>
            <br/><a href="http://www.testtrack.tv/danny-macaskill-way-back-home/">Danny MacAskill &#8211; &#8220;Way Back Home&#8221;</a>
        </li>
        <li>
            <a href="http://www.testtrack.tv/dakar-2011-carlos-sainz-red-bull-volkswagen-touareg/">
            <img src='http://www.testtrack.tv/wp-content/uploads/2011/04/0678.jpg' height='81' alt='thumb'/>
            </a>
            <br/><a href="http://www.testtrack.tv/dakar-2011-carlos-sainz-red-bull-volkswagen-touareg/">Dakar 2011 &#8211; Carlos Sainz &#8211; Red Bull Volkswagen Touareg</a>
        </li>
        <li>
            <a href="http://www.testtrack.tv/porsche-959-vs-ferrari-f40-bbc-top-gear/">
            <img src='http://www.testtrack.tv/wp-content/uploads/2011/04/0645.jpg' height='81' alt='thumb'/></a>
            <br/><a href="http://www.testtrack.tv/porsche-959-vs-ferrari-f40-bbc-top-gear/">Porsche 959 vs ferrari F40 &#8211; BBC Top Gear</a>
        </li>
    </ul>
</div><!--.scroll-pane-->

И затем в javascript:

$(function() {
    // Calculate the width of the contents
    var w = 0;
    $('.scroll-pane li').each(
        function()
        {
            w += $(this).outerWidth();
        }
    );
    // Set the width of the UL
    $('.scroll-pane>ul').css('width', w + 'px');
    // Initialise jScrollPane
    $('.scroll-pane').jScrollPane();
});

Конечно, вам также понадобится немного CSS, чтобы список вел себя как набор встроенных элементов. И вам не понадобятся некоторые другие CSS, которые у вас были. Таким образом, полный CSS должен выглядеть примерно так:

.scroll-pane  {
    width: 100%;
    overflow: auto;
}
.scroll-pane ul
{
    height: 150px;
    margin: 0;
    padding: 0;
}
.scroll-pane li
{
    float: left;
    padding: 0;
    margin: 0 10px 0 0;
    height: 150px;
    width: 145px; 
}
person vitch    schedule 22.05.2011
comment
вау спасибо за очень подробный ответ! в итоге я решил эту проблему, не используя DIV в качестве оболочки... поскольку IE7 задыхался от того, чтобы заставить блочный элемент вести себя как встроенный элемент. я переключился на SPAN (после того, как много выдергивал волосы), и это сработало. я подозреваю, что использование LI, как вы делаете здесь, будет работать по той же причине. - person helgatheviking; 22.05.2011
comment
На самом деле, li по-прежнему являются элементами блочного уровня. Но в приведенном выше примере они плавают слева. В сочетании с настройкой ширины контейнера это заставит их располагаться горизонтально... - person vitch; 23.05.2011

arrow_upward
0
arrow_downward

ответ оказался не использовать DIV на уровне блока, когда я хотел, чтобы элементы вели себя как встроенные. IE7 неправильно обрабатывал объявление встроенного блока. переключение элемента "thumbWrapper" на SPAN решило это для меня.

person helgatheviking    schedule 22.05.2011