Horiztonal Jscrollpane窗格在IE7中恢复为垂直

Question

当我在IE8的兼容模式下查看我的网站：http://www.testtrack.tv/时，水平滚动窗格变成了垂直窗格。凯文的演示站点不是这样的，所以它一定是我的CSS中的一些东西。

我正在使用jscrollpane的示例中的默认css，并添加了几个……我添加了空格: 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中。这是不是更适合做安莉元素呢？

我的标记如下所示：

<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中水平显示。

Answer 1

结果是，当我想让元素像内联一样工作时，不要使用块级DIV。IE7没有正确处理内联块声明。将"thumbWrapper“元素切换为SPAN为我解决了这个问题。

Answer 2

与其依赖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; 
}