Horiztonal Jscrollpane возвращается в вертикальное положение в IE7 - PullRequest
Новая
       13

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

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

при просмотре своего сайта: 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, как и все остальныебраузеры.

Ответы [ 2 ]

1 голос
/ 22 мая 2011

Вместо того, чтобы полагаться на 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; 
}
0 голосов
/ 22 мая 2011

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

...