IE六、7下块级元素设置display:inline-block不换行的解决办法

时间 2019-11-10

标签元素设置 display inline block 不换行的解决办法栏目 CSS 繁體版

原文原文链接

使用背景

在实际的工做中，咱们有的时候会把块元素设置为inline-block，这样作的目的有2个，一是块元素可以排列到一行，二是块元素就造成包裹性，可以自适应content area，而没必要设置宽和高（依实际状况而定），在如今浏览器中没有什么问题，可是IE六、7下，当把block元素设置成inline-block以后，仍是在分别的两行，下面咱们看一下现象。css

代码以及IE六、7下的表现

CSS：chrome

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下的表现spa

IE6下的表现3d

IE7下的表现code

IE8+下的表现形式blog

可见，chrome以及IE8+下display:inline-block按正常显示，而IE六、7下显示是不正确的，那么解决办法是先把block元素排成一行，而后再触发hasLayout，这样就能很好的解决这个问题了。class

解决方案

    .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等一系列属性。而后看下效果：float

IE6下的表现：自适应

IE7下的表现