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 元素只要觸發(fā)了 hasLayout 其表現(xiàn)就類似于 inline-block，這里設(shè)置 display:inline-block; 或者 zoom:1; 等其他屬性值可以觸發(fā) hasLayout ，表現(xiàn)出來是一樣的。

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 元素即使觸發(fā)了 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 元素轉(zhuǎn)化為 inline 元素，強(qiáng)制其不換行；然后通過 zoom:1 觸發(fā) hasLayout，使其可以設(shè)置寬高。修復(fù)后的 截圖如下：

block元素：display：inline-block;

ie6-3.jpg

結(jié)合現(xiàn)代的瀏覽器，我們可以給出一下代碼，

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

寫到這里代碼完美了么？？？呵呵，，你們又想多了，，這個發(fā)現(xiàn)在所有瀏覽器里，，元素使用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

一切正常了，想知道為什么有間隙，去掉間隙的原理，請移步這里查看更多。