行级块元素 display:inline-block

by · 2013年12月06日 · 2023 Words · ~5min reading time | Improve on

对一个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前后的效果对比如下：

应用前	应用后

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

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

应用 `zoom:1` 前	应用 `zoom:1` 后

我们发现，使用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前后的效果对比如下：

应用前	应用后

看上去没有任何变化。其实，在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元素一样。

参考文章：

http://www.brunildo.org/test/InlineBlockLayout.html(需翻墙)

行级块元素 display:inline-block

分类

标签云