幅が定義されていない複数の要素を保持するカルーセルを作成するタスクがあります。したがって、最も簡単な方法は、すべての要素を CSS で一列に並べてから、すべての JS 計算などを行うことです。(バグプロデューサー)IE6でテストする前は、すべてうまくいっていました。
ブラウザで何が起こっているかのサンプルを次に示します。
サファリ (5.1.2)、Firefox (10.0.2)、オペラ (11.62)
インターネット エクスプローラー (9.1)
Internet Explorer (6) (スパン バンプ リ ボックス内のテキスト)
LI に関する DebugBar、プリセット ルールwhite-space: normal を無視しています— Internet Explorer 6
SPAN に関する DebugBar、継承の事前設定規則white-space: normal を無視しています— Internet Explorer 6
ここで HTML のサンプル:
<div class="carousel">
<div class="box">
<ul>
<li>
<span>Some text</span>
</li>
<li>
<span>Some longer text</span>
</li>
<li>
…
</li>
</ul>
</div>
</div>
それを管理する CSS の一部:
div.carousel {
width: 700px; height:200px;
}
div.carousel div.box {
width: 100%; height: 100%;
overflow: hidden;
}
div.carousel div.box ul {
display: block;
white-space: nowrap; /* to make all inside elements lay in row */
}
div.carousel div.box ul li {
margin-left: 23px;
width: 130px; height: 150px;
display: inline-block;
vertical-align: bottom;
white-space: normal;
}
IE6 以前のボックス修正:
div.carousel div.box ul li {
display: inline;
zoom: 1;
}
jsFiddle での実際の例