クラス.listが添付された親DIVを用意します。Paretnt DIVは、position:relativeプロパティを持つ8つのfloatdivで構成されます。
親Divにはmin-widthプロパティがあり、 IE8互換モードでページを開くと、min-widthプロパティがwidthプロパティと見なされ、8つのDIVSすべてが連続して表示されます。その中のどこに3divのみを表示する必要があります。
これがHTMLコードです
<div id="list-container">
<div class='list'>
<div class='item'><h1>1</h1></div>
<div class='item'><h1>2</h1></div>
<div class='item'><h1>3</h1>
</div>
<div class="item"><h1>4</h1>
</div>
<div class='item'><h1>5</h1>
</div>
<div class='item'><h1>6</h1>
</div>
<div class='item'><h1>7</h1>
</div>
<div class="item"><h1>8</h1>
</div>
</div>
</div>
CSSコード
.list{
background:grey;
min-width:1400px;
float:left;
}
.item{
background:green;
width:140px;
height:80px;
margin:5px;
float:left;
position:relative;
}
#list-container {
float: left;
overflow: hidden;
width: 450px;
}
Firefoxで完璧に動作します。
更新:IE7でも同じ問題が発生します(IE8ブラウザーを使用し、開発者ツールからブラウザーモードをIE7に切り替えます)
編集:より明確にするために画像を追加しています
IE7およびIE8互換モード
FF
前もって感謝します