IE6 7下inline block不起作用

網上查到資料是給元素設定display:inline-block，再觸發layout，設定display:inline;因為所有的瀏覽器都支援inlie。

即: div div

原理在下面：

寫在前面的話，在我開發css的過程中，我發現很多詭異的問題都是對概念理解有偏差，所以在每篇開始的時候，我都把w3c的解釋拿出來曬曬。個人經驗，很多的問題看看w3c一般都能夠解決，w3c是最好的參考書。

官方解釋：將物件呈遞為內聯物件，但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內，允許空格。

按照這個解釋：支援的瀏覽器有（ie8,ie9,chrome,firefox3.6+,由於我是用firefox3.6測試的），ie6，ie7 是不支援這個屬性的。

ie6,7 如何支援這個屬性呢？

對於塊級元素，直接讓塊級元素成行內元素，然後再觸發layout。，可能有的同學會說，怎麼說ie6,7不支援這個元素呢？

我不是經常在ie6,7的a標籤、span 下使用這個屬性嗎？也起到了作用，這裡理解可能有乙個誤區，使用display：inline-block是觸發了layout的原因。

另外一種方式就是先觸發塊級元素的layout 屬性，然後再讓他成內聯元素來展現。比如p元素,可以這樣寫 pp

display：inline-block可以用來做什麼？

使用它要注意什麼呢？

在使用了display：inline-block的元素之間有換行符，空格間隙問題。

1.塊狀元素被設定了display：inline-block後，ie6,7沒有空格問題。其他瀏覽器都有。如下圖所示：

在ie8，ie9，firefox可以通過使用font-size:0來解決，但是chrome很悲劇。還是有空白，我使用的是chrome10。不能清除。可以通過新增letter-spacing屬性

的值來解決，建議作者通過嘗試來解決這個問題。我設定的值是-8px剛才好清除空白。我擔心這會不會有相互覆蓋問題。後來我將值調大到-28px，果然，在chrome中有覆蓋，但是在其他的瀏覽器中沒有。可見解決這個問題以chrome為主。

2.內聯元素被設定了display：inline-block後，所有的瀏覽器都有換行，空白間隙問題。

如下圖所示：

所有瀏覽器，ie6,7,8,9 chrome，firefox都有空白，

怎麼解決呢。直接在包含的元素上新增letter-spacing:-8px; 即可。

最後附上我研究的**：

2 317 18 19 display:inline-block的研究

20 測試這個屬性的支援情況1

21 測試這個屬性的支援情況2

27 28

2930

32 33