谈谈display:inline-block的那些事

1. inline元素的display:inline-block,

ie6的截图如下

inline元素：display：inline-block;

ie6-1.jpg

.span{
   display: inline-block;
   width: 100px;
   height: 40px;
   line-height: 40px;
   background-color: #007aff;
   text-align: center;
   font-size: 18px;
}

测试表明：IE6 中 inline 元素只要触发了 hasLayout 其表现就类似于 inline-block，这里设置 display:inline-block; 或者 zoom:1; 等其他属性值可以触发 hasLayout ，表现出来是一样的。

2）block 元素 display:inline-block

ie6截图如下：

block元素：display：inline-block;

ie6-2.jpg

.span{
   display: inline-block;
   width: 100px;
   height: 40px;
   line-height: 40px;
   background-color: #007aff;
   text-align: center;
   font-size: 18px;
}

测试表明：IE6 中 block 元素即使触发了 hasLayout 也不能具有 inline-block 元素不换行的特性。想要 block 元素支持 inline-block 元素的特性，我们可以这样做：

 .span{
   display: inline;
    *zoom：1；
   width: 100px;
   height: 40px;
   line-height: 40px;
   background-color: #007aff;
   text-align: center;
   font-size: 18px;
}

首先让 block 元素转化为 inline 元素，强制其不换行；然后通过 zoom:1 触发 hasLayout，使其可以设置宽高。修复后的 截图如下：

block元素：display：inline-block;

ie6-3.jpg

结合现代的浏览器，我们可以给出一下代码，

 .span{
    display:inline-block;
   *display: inline;
   *zoom：1；
   width: 100px;
   height: 40px;
   line-height: 40px;
   background-color: #007aff;
   text-align: center;
   font-size: 18px;
}

写到这里代码完美了么？？？呵呵，，你们又想多了，，这个发现在所有浏览器里，，元素使用inline-block属性会有间隙，ie6下inline元素会有间隙，截图如下：

chrome-1.jpg

ie6-4.jpg

既然有缝隙那就去掉缝隙啊。。我的做法如下：

在是有inline-block元素的父级添加：

.wrap{
  font-size:0;
  word-spacing:-1px;
}

chrome-2.jpg

ie6-5.jpg

一切正常了，想知道为什么有间隙，去掉间隙的原理，请移步这里查看更多。