【整理】幾種解決inline-block間隙的方案

有基礎的朋友能夠直接跳過序言，直接看方案

序

display有幾種屬性：

inline是內聯對象，好比<a/> 、 <span/>標籤等，能夠「堆在一塊兒」顯示，寬高由內容決定，不能設置；
block是塊對象，好比<div/>、<p/>標籤等，要佔一整行，可是寬高能夠自定義；
爲了彌補inline和block的不足，又擴充了inline-block屬性；
inline-blcok能夠將對象呈遞爲內聯對象，而內容做爲塊對象呈遞。

通俗點講就是

「可定寬高的堆在一塊兒」顯示

爲何會有間隙

inline-blcok塊之間的不可見符號會被保留父層字體的1/3大小的空間

解決方案

知道了緣由，方案就好找了，我把它分爲如下幾種

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

一、改變書寫結構

<ul>
    <li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li>
</ul>

<ul>
    <li>
        item1</li><li>
        item2</li><li>
        item3</li><li>
        item4</li><li>
        item5</li>
</ul>

<ul>
    <li>item1</li
    ><li>item2</li
    ><li>item3</li
    ><li>item4</li
    ><li>item5</li>
</ul>

<ul>
    <li>item1</li><!--
  --><li>item2</li><!--
  --><li>item3</li><!--
  --><li>item4</li><!--
  --><li>item5</li>
</ul>

以上幾種都可以完美的達到去除間隙的做用
可是，從代碼的可讀性上看，或多或少有一些不足

二、打包工具

使用打包工具或者自寫腳本，在上線前將響應HTML代碼打包成一行，便可

三、丟失結束標籤

<ul>
    <li>item1
    <li>item2
    <li>item3
    <li>item4
    <li>item5
</ul>

此方法雖然能夠解決此問題，可是在Doctype爲xhtml時將報錯，全部方法是否適用須視狀況而定。

四、css hack

知道間隙的產生緣由和間隙的大小後，動手寫一個css hack也是一種很好的方法
一、將父容器的字體大小設置爲0，可解決絕大多數瀏覽器（老版本safari不支持）
二、針對不支持上條的瀏覽器設置字塊或字符間間隙letter-spacing／word-spacing，推薦letter-spacing，由於此屬性不會產生負間隙，但須要注意，要在子元素上設置letter-spacing:0
三、若是你轉化可是塊對象，那須要爲低版本瀏覽器設置inline兼容，不讓樣式會亂掉
總結以上幾點給出如下代碼

.parent {
    letter-spacing: -.3333em;
    font-size: 0;
}
.child {
    display: inline;
    display: inline-block;
}

如發現文字有不妥之處，還請不吝賜教