我如何在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中打開頁面時，頁面看起來像這樣;

如果我使用浮動：左，問題似乎解決了，但是根據左所有div。我該如何解決這個問題？

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

Answer 1

inline-block的不IE7工作。

你必須使用zoom：1並顯示：inline作爲hack或者沒有來自不同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/