水平 Jscrollpane 在 IE7 中恢复为垂直

Question

当我查看我的网站时： http://www.testtrack.tv/ 在 IE8 的兼容模式下水平滚动窗格变成垂直窗格。 Kevin 的演示站点并非如此，因此它一定是我的 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 中。作为 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 中水平显示。

Answer 1

我建议不要依赖 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 – 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 – “Way Back Home”</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 – Carlos Sainz – 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 – 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; 
}

Answer 2

答案是，当我希望元素表现得内联时，不要使用块级 DIV。 IE7 没有正确处理内联块声明。将“thumbWrapper”元素切换为 SPAN 为我解决了这个问题。