0

スライドショーを作成しようとしている子divを持つdivがあります。子divを表示inline-blockしましたが、IE<=9を除いてすべてが見栄えがします。IE <= 9では、それぞれdiv.contentItemが垂直に表示されます。

非同期で追加されるものが多く、新しい要素が追加されるたびに幅を再計算する必要がなかったためwhite-space: nowrap、inline-block（の代わりにfloat:left）を使用しました。そのため、幅を指定せずにフロートを使用する方法がない限り、私は近づかないほうがいいと思います。div.contentItemdiv.contentfloat:left

注Doctypeはマスターページにあり、cms内の他の多くのページで使用されているため、変更できません。回帰テストが多すぎます。

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
    <div class="content">
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
    </div>
</body>
</html>

css

.content {
    white-space: nowrap;
    margin-left: 256px;
    position: relative;
    padding-top: 14px;
}

.contentItem {
    display: -moz-inline-stack;
    display: inline-block !important;
    *display: inline;
    margin: 0 14px 0 0;
    vertical-align: top;
    zoom: 1;
}
4

4 に答える 4

1

親のdivを保持している場合は、親の幅を定義しなくても、子で white-space: nowrap使用できるはずです。float: left

以前に別の投稿で行ったこのフィドルのイラストを参照してください。ここにも当てはまります。white-space結果ウィンドウのサイズを変更して、が設定されている両方のバージョンnowrap（フローティングブロックまたはインラインブロック）が常に1つの行にとどまるようにすることができます。

于 2012-09-17T18:56:01.617 に答える
1

に変更しdiv.contentItemましたspan.contentItem。これで、アイテムがインラインで表示され、CSSを変更する必要はありません。

于 2012-09-19T20:04:03.740 に答える
0

インラインブロックは空白に関しては敏感です。コンテンツが親とまったく同じ幅である場合、おそらく壊れて次の行に移動します。おそらく、このようなものが必要です。

<body>
    <div class="content">
        <div class="contentItem">...</div><div class="contentItem">...</div><div class="contentItem">...</div>
    </div>
</body>

インライン要素の周囲からすべての空白を削除すると、希望するサイズに正確になります。

于 2012-09-17T18:53:42.890 に答える
-1

IE<=8は完全にはサポートしていませんdisplay: inline-block。 ここを読んでください。

を使用する代わりにinline-block、次のコードをスライドショーに採用してみてください：http: //jsfiddle.net/9ACNT/

于 2012-09-17T18:52:17.960 に答える