IE六、7下塊級元素設置display:inline-block不換行的解決辦法

使用背景

在實際的工做中，咱們有的時候會把塊元素設置爲inline-block，這樣作的目的有2個，一是塊元素可以排列到一行，二是塊元素就造成包裹性，可以自適應content area，而沒必要設置寬和高（依實際狀況而定），在如今瀏覽器中沒有什麼問題，可是IE六、7下，當把block元素設置成inline-block以後，仍是在分別的兩行，下面咱們看一下現象。

代碼以及IE六、7下的表現

CSS：

body {
        padding: 10px;
    }
    
    .block_to_inlineblock,
    .inline_to_inlineblock {
        padding: 10px;
        margin: 10px;
        float: left;
    }
    
    .block_to_inlineblock div {
        display: inline-block;
        width: 200px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 12px;
    }

HTML：

    <div class="block_to_inlineblock bdr_blu">
        <h3>block元素設置成inline-block</h3>
        <br/>
        <div class="bdr_red">
            DIV：inline-block
        </div>
        <div class="bdr_blu">
            DIV：inline-block
        </div>
    </div>

 

 現代瀏覽器chrome下的表現

IE6下的表現

IE7下的表現

IE8+下的表現形式

可見，chrome以及IE8+下display:inline-block按正常顯示，而IE六、7下顯示是不正確的，那麼解決辦法是先把block元素排成一行，而後再觸發hasLayout，這樣就能很好的解決這個問題了。

解決方案

    .block_to_inlineblock div {
        display: inline-block;
        width: 200px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 12px;
        *display: inline;
        *zoom:1;
    }

 

增長:*display: inline;是爲了讓塊元素排成一行，*zoom:1的做用是觸發hasLayout，可以支持設置寬、高、line-height等一系列屬性。而後看下效果：

IE6下的表現：

IE7下的表現