浅谈IE6/7对display:inline-block的支持

到底什么是inline-block？

       设置了inline-block的元素创建了一个行级的块容器，该元素内部即内容被格式化为一个块级元素，同时元素本身被格式化为一个行内元素。直白点就是inline-block的元素既有block元素可以设置高度宽度的特性，同时又具有inline元素默认不换行的特性。

      通俗的分开对inline元素和block元素来说就是：inline元素设置了该属性以后，任保持默认的不换行的特性，但其内部表现得就是一个block元素，可以设置高度宽度等。而block元素设置了该属性以后，表现得就是一个行内元素，持有不换行的特性，但实质上任由block的特性，可以设置高度宽度。

IE的inline-block

很多人都说ie6/7不支持inline-block特性，但是在msdn微软开放社区里找到证据，ie从5.5开始就已经对inline-block支持了，（证据链接http://msdn.microsoft.com/zh-cn/library/ie/ms530751(v=vs.85).aspx），只是表象形式上有所偏差。现在看一看IE6中inline元素和block元素的表现：

（1）inline元素的display：inline-block

<a href="">one</a>
<a href="">two</a>
<a href="">three</a>
<a href="">four</a>

a{
background: #ddd;
line-height: 1.5;
width: 50px;
display: inline-block;
}

ie及chrome下的效果：



（2）block下的表现：

<p>nihhjksak</p>
<p>ghjdbjsbj</p>
<p>cbjshdbcjs</p>
<p>bhjdwbjhjk</p>

p{
background: #eaa;
width: 90px;
height: 40px;
display: inline-block;
}

chrome下的效果：



IE下的效果：



从差异上可以看出ie和其他浏览器的表现形式上不一样，即使是inline-block触发了haslayout还是不具有inline-block不换行的特性，不过想要block支持inline-block元素的特性，我们可以在其基础上添加：

*p{
display: inline;
zoom:1;
height: 30px;
margin-right: 2px;
}

效果如下：



设置display：inline，使block元素变为inline元素，然后设置zoom：1，使其具有布局，就可以设置高度宽度等特性。

总结来说就是：ie中的display：inline和zoom：1相当于display：inline-block。

参考来自520UID的“你真的懂display:inline-block吗”
http://www.520ued.com/article/index/arcid/17.html