关于inline-block的问题

nline-block是个神奇的属性，它既然能在Visual formatting model中占据一席之地，说明有它的独特之处。

什么是inline-block？

在w3c官网搜一下inline-block就能找到答案，以下是文摘：

This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as a replaced element on the line.

大概的意思：应用了inline-block的元素，会被渲染成一个inline box，同时该元素内部表现得像一个block box。

简而言之，使用了inline-block，我们就可以对它设置宽高、垂直方向的padding、margin等，并且不会独成一行。

inline-block出现之后，我们随处可见以下这种写法：

display: inline-block;
*display: inline;
*zoom: 1;

我们都知道*display: inline;*zoom: 1;是针对IE（<=7）的hack。

ie6、7不支持inline-block吗？

不妨先来做几个测试，测试环境：

ie7本文不会去做专门的测试，但是会在ie7下验证ie6的测试结果，以下所有截图效果均来自ie6。（ie7结果相同）

html测试代码如下：

<section>
    <h2>'IE6/7不支持inline-block吗？</h2>
    <div class="ibwrap">
        <span class="ib">inline-block-1</span>
        <span class="ib">inline-block-2</span>
        <span class="ib">inline-block-3</span>
        <span class="ib">inline-block-4</span>
        <span class="ib">inline-block-5</span>
    </div>
</section>

css测试代码如下：

.ibwrap {}
.ib {
    display: inline-block;
    border: 1px solid red;
    width: 150px;
    height: 26px;
}

在ie6下运行一下，看看效果：

咦，这不支持了吗？inline元素设置了width、height都生效了。

那是不是说ie6/7是支持inline-block的？别着急，既然有人写了*display: inline;*zoom:1，那应该是有原因的，yui css也这么干了，空穴不来风。

可能有人已经注意到了，我上面的测试代码是对inline元素做inline-block的，那如果对block元素做inline-block呢？html测试代码如下（css代码同上）：

<section>
    <h2>'IE6/7不支持inline-block吗？</h2>
    <div>
        <h3>inline元素应用inline-block</h3>
        <section class="ibwrap">
            <span class="ib">inline-block-1</span>
            <span class="ib">inline-block-2</span>
            <span class="ib">inline-block-3</span>
            <span class="ib">inline-block-4</span>
            <span class="ib">inline-block-5</span>
        </section>
    </div>
    <div>
        <h3>block元素应用inline-block</h3>
        <section class="ibwrap">
            <p class="ib">inline-block-1</p>
            <p class="ib">inline-block-2</p>
            <p class="ib">inline-block-3</p>
            <p class="ib">inline-block-4</p>
            <p class="ib">inline-block-5</p>
        </section>
    </div>
</section>

ie6测试结果如下：

oh，看到区别了吧，ie6/7在block元素上应用inline-block，虽然宽高正常了，但是却换行了！

测试结果

由上述测试可知，ie6/7是支持inline-block，只不过对block元素的支持不完善，所以才有了*display: inline;*zoom:1;这样的hack，display:inline使block元素不换行，zoom:1触发元素hasLayout，使其表现得像个block元素那样可以设置宽高等样式。如果你还不相信测试结果，你可以看看这里：

如果你正在使用ie6/7，你可以查看Demo效果。

本文链接：» https://www.csswang.com/exp/2981

转载请注明本文来源出处。