行级块元素 display:inline-block


原文链接: 行级块元素 display:inline-block

对一个html元素应用display:inline-block会产生怎样的效果?

官方文档是这样说的:

inline-block

This value causes an element to generate an inline-level
block container. The inside of an inline-block is formatted as a block
box, and the element itself is formatted as an atomic inline-level
box.

也就是说:inline-block会使元素成为一个行级块容器。即在容器内部产生BFC,而容器本身则被格式化为一个行级元素(内联元素)。

更通俗的说就是:inline-block元素可以像块元素那样设置宽高等属性,同时还会像内联元素一样水平排列、可以设置vertical-align、收缩包围自身内容。

先来看看在现代浏览器中分别对块元素和内联元素应用display:inline-block后的效果。应用之前如下:

接着我们给块元素和内联元素应用display:inline-block,效果如下:

请比较上面的两组代码,和显示效果。

那么IE浏览器是否支持inline-block呢?答案是肯定的,从MSDN的文档上我们可以看到:

The inline-block value is supported starting with Internet Explorer
5.5.

也就是说IE 从5.5版本就开始支持inline-block了。但是在IE 6、7中对元素应用display:inline-block产生的效果和现代浏览器并不完全一致。

接下来我们分别讨论在IE 6、7中对内联元素块元素 应用display:inline-block,看看会产生怎样的效果。

  • 内联元素应用display:inline-block

测试用例一如下:

    Lorem ipsum dolor sit amet, consectetur
    <span style="background: yellow;border: 2px solid blue;">Lorem ipsum <br> dolor sit amet. </span>
    adipisicing elit. Consequuntur a.

span应用display:inline-block前后的效果对比如下:

应用前应用后
inline-blockenter image description here

上一篇有关hasLayout的文章里,我们说过display:inline-block可以使元素拥有Layout。而拥有layout的元素表现出来的特征就是一个独立的矩形容器,并且其内容不受周围元素的影响。

紧接着,还是使用测试用例一的代码,不过这次我们使用zoom:1,来使span拥有layout。对比效果如下:

应用 zoom:1应用 zoom:1
inline-blockenter image description here

我们发现,使用zoom:1的效果和使用display:inline-block的效果是一样的。事实上,在IE6、7中,只要使内联元素拥有layout(包括但不限于通过display:inline-block来获得Layout),内联元素就会表现的如同inline-block元素一样。

  • 块元素应用display:inline-block

测试用例二如下:

    Lorem ipsum dolor
    <div class="block">Lorem ipsum <br> dolor sit amet.</div>
    sit amet  elit. Consequuntur a.

div应用display:inline-block前后的效果对比如下:

应用前应用后
enter image description hereenter image description here

看上去没有任何变化。其实,在IE6、7中,display:inline-block同样会使块元素获得layout,但是并不能使块元素表现的如同inline-block元素一样。

通过上面的分析我们知道:在IE6、7中,让一个inline元素拥有Layout就可以使其表现的如同inline-block元素一样,那么相应的,我们让一个拥有Layout的元素display:inline会产生怎样的效果呢?

看测试用例三:

HTML:

    Lorem ipsum dolor
    <div class="block">Lorem ipsum <br> dolor sit amet.</div>
    sit amet elit. Consequuntur a.

CSS:

    .block {
        background: red;
        border: 2px solid blue;
        display: inline-block;
    }
    .block {
        display: inline;
    }

效果如下:

enter image description here

我们通过display: inline-block使div拥有layout,随后又将其display: inline,这时块元素表现的就和inline-block元素一致了。需要注意的是:通过display: inline-block获得的Layout并不会因为display: inline而失去,详见谈谈hasLayout。而不会失去layout的前提是:将display: inline-block
display: inline写到两条规则里,也就是说如果你写成下面这样是不行的:

    .block {
        background: red;
        border: 2px solid blue;
        display: inline-block;
        display: inline; /*写到了一条规则里*/
    }

因为这样写的话,在display: inline-block使div拥有Layout之前就被display: inline覆盖了,即div根本没有得到layout。

同时为了保证浏览器兼容性,需要将display: inline写到针对IE6、7的条件注释或hack中去,否则在现代浏览器中就会产生如下效果:

enter image description here

在阅读别人代码时,你可能会经常见到下面这样的写法:

.XX{
    display: inline-block;
    *display: inline;
    *zoom:1;
}

上面的代码同样是为了让XX元素成为inline-block元素。现代浏览器只会识别display: inline-block,而IE6、7则会识别全部三条样式。通过上面的叙述,我想你应该明白为什么需要*zoom:1,这里不再赘述。

总结一下:

在IE6、7中,display: inline-block会使元素拥有Layout。拥有Layout的元素如果同时display: inline,那么该元素就会表现得如同现代浏览器中的inline-block元素一样。

参考文章:

`