最小宽度属性在IE8兼容模式下有问题

Question

有一个父DIV并附加一个类.list 。 Paretnt DIV由具有position：relative属性的8个浮动div组成。

父Div具有min-width属性，当我以IE8兼容模式打开页面时，其将min-width属性视为width属性，并连续显示所有8个DIVS。 其中应仅显示3格。

这是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

提前致谢

Answer 1

您不能将父容器的子元素设置为较小的宽度。 在某些方面它将始终显示古怪。 另外，ie8不支持最小宽度。 尝试删除最小宽度。

如果您向我们展示您真正想做的事，我们可能会提供更多帮助。

Answer 2

对于IE，您应该添加* html .yourclass{height: 1%;}进行修复。 你试过了吗？

Answer 3

您继承了错误的类，使父母与孩子有所不同，这将有助于确保:)看小提琴

   link:  http://jsfiddle.net/MarmeeK/gu3Us/1/

谢谢，