display:inline-block終極解決方案

對於display:inline-block，做項目的時候經常用到，經常出問題，所以在今天，終於下定決心要好好整理下。

衆所周知：inline-block的作用是將對象呈遞爲內聯對象，但是對象的內容作爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。這就給我們帶來很大的便利，比如不用浮動，就可以將元素呈遞爲內聯樣式，而且還可以直接給元素設置寬度、高度、邊距等等。俗話說，有利就有弊，沒有東西是完美的。inline-block在給我們帶來好處的同時，也帶給了我們很多麻煩。就比如前端要考慮的兼容問題。
一、兼容性
IE6/IE7下對display:inline-block的支持性不好。

1、inline元素的display屬性設置爲inline-block時，所有的瀏覽器都支持；

2、block元素的display屬性設置爲inline-block時，IE6/IE7瀏覽器是不支持的；
就如下面的代碼：
html:

<ul class="test">
        <li>放假</li>
        <li>放假</li>
        <li>放假</li>
        <li>放假</li>
        <li>放假</li>
        <li>放假</li>
    </ul>

css:

.test {width:200px;height:200px;background: #add8e6;padding:80px 40px 20px;}
.test li {display:inline-block;background:#f08080;border:1px solid #fafad2;width:50px;height:50px;line-height:50px;text-align:center;font-size:16px;font-family:'microsoft yahei';color:#fff;list-style-type: none;margin-top: -1px;}

在ff下是這樣的：

在IE6/7下卻是這樣的：


哎，看到這一幕的時候，心情很憂傷吶。不過還好，我們可以用Css Hack方法讓display：inline-block在IE6/7下生效。
在剛剛的代碼後面加上*display:inline;*zoom:1;這兩句就可以了。

二、出現間隙
查了資料，才知道display:inline-block在IE下僅僅是觸發了layout，而它本是行佈局，觸發後，塊元素依然還是行佈局。所以需讓塊元素呈遞爲內聯對象，display:inline則起到了這一作用（*號只被ie6、7所識別），然後再通過zoom:1觸發layout。即可實現所謂的inline-block。原本以爲事情就這樣結束了，因爲以前的項目都是要求inline-block後呈遞的元素之間有邊距，所以也沒有考慮太多。但是今天做這個的時候，我發現了問題的所在。

左邊這塊和右邊這塊都被我設置爲inline-block，但是悲劇出現了，中間有間隙！！！爲什麼會出現間隙呢？難道是本身就設置了邊距？於是我又margin:0;padding:0;試了一下，沒用！那就證明不是margin和padding的問題。到底是什麼呢？仔細想想，剛前面說了inline-block支持空格，於是恍然大悟，才發現，原來是裏邊的換行符、空格等在作祟，幹掉它們，間隙就沒有了。

關鍵的來了，font-size:0;加上這一句，間隙立馬消失的無影無蹤了。

三、總結

每一個看似簡單的東西，都需要我們深入的去理解，去運用，然後再次理解、運用。特別是當我們遇到問題，或者是實際的效果跟我們預期的效果不一致時，不要先去想怎樣解決它，要首先去想出現這個問題的原因。因爲如果只是想着怎麼去解決的話，有可能用錯誤的方式獲得了正確的效果，這樣你就離正確的東西越來越遠了。如果遇到問題，就找出 出現這個問題的根本原因，那麼就能對症下藥，並很快的找到正確的解決方法。這樣才能很快的進步。特別是在前端這一行，會出現很多的問題，以前我遇到問題總是隻想着怎麼去解決它，有的時候就用了錯誤的方法，但後來我才發現，結果有時候並沒有過程重要，在前端這一行，很有可能用錯誤的方法卻得到了正確的答案，但千萬不要認爲自己就正確了，有可能這個錯會導致接下來的更多問題。歸根結底，永遠不要認爲我們什麼都懂了，或者什麼東西太簡單了，就不去研究。我們應該不斷的保持探索的精神，在前端的道路上，紮實自己的基礎，堅定自己的信念，奮鬥下去，菜鳥終將變成大鳥！