如何在IE7中将div放在div中

Question

HTML：

<div class="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS：

.wrapper{
    width:1000px;
    text-align:center;
    float:left;    
}

.wrapper .box{
    width:300px;
    height:50px;
    display:inline-block;
    background:#F00;
    margin:0 10px 10px 0;
    overflow:hidden;
 }

我想将所有div放在这个包装div中;

以上代码在IE8，IE9，Chrome，Safari，Opera，FF中运行良好，但在IE7中无效。当我在IE7中打开页面时，页面看起来像这样;

如果我使用float：left，问题似乎已经解决，但所有div都基于左边。我该如何解决这个问题？

http://jsfiddle.net/eBxFX/2/

Answer 1

内联块在IE7中不起作用。

你必须使用zoom：1并显示：内联为黑客或没有来自不同css的黑客只针对ie7。

.wrapper .box{
    width:300px;
    height:50px;
    display:inline-block;
    *display: inline;
    *zoom:1;
    background:#F00;
    margin:0 10px 10px 0;
    overflow:hidden;
}

http://jsfiddle.net/eBxFX/4/