網上查到資料是給元素設定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; 即可。
最後附上我研究的**：
12 317 18 19 display:inline-block的研究
20 測試這個屬性的支援情況1
21 測試這個屬性的支援情況2
22
23
27 28
2930
31
32 33
IE6,7下的那些坑
lang en charset utf 8 title type text css warp box style head class warp class box div div body html 在ie6 ie7,ie8,chrome,firefox顯示效果 當使box元素為浮動元素時 box...
IE6 7下如何實現inline block
ie6，ie7的haslayout屬性是個讓人頭疼的問題。在做導航條的時候，一般會用到ul li結構，大多數時候我們是把li設定為浮動，讓其併排顯示在同一行。還有一種方法就是設定li為display inline 這樣可以達到同樣的效果，但是問題是inline元素的特性 預設無法設定寬度，高度，以及...
ie67中li下的間隙問題
一 以下是引發此bug的條件 必要條件 li的子元素設定了浮動 例如 本例中的a設定了左浮動 充要條件 ie6 7 li設定了width height zoom 之一 例如 本文中的li設定了width 僅ie7 li設定了padding top padding bottom margin top ...