0

私のサイトを表示すると: 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 で他のすべてのブラウザーと同様に水平方向に表示するための修正を探しています。

4

2 に答える 2

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 &#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; 
}
于 2011-05-22T13:40:51.937 に答える
0

答えは、要素をインラインとして動作させたい場合、ブロックレベルの DIV を使用しないことであることが判明しました。IE7 はインライン ブロック宣言を適切に処理していませんでした。「thumbWrapper」要素を SPAN に切り替えると、これが解決されました。

于 2011-05-22T15:14:59.277 に答える