序

display有幾種屬性：

inline是內(nèi)聯(lián)對象，比如<a/> 、 <span/>標(biāo)簽等，可以“堆在一起”顯示，寬高由內(nèi)容決定，不能設(shè)置；

block是塊對象，比如<div/>、<p/>標(biāo)簽等，要占一整行，但是寬高可以自定義；為了彌補inline和block的不足，又?jǐn)U充了inline-block屬性；

inline-blcok可以將對象呈遞為內(nèi)聯(lián)對象，而內(nèi)容作為塊對象呈遞。

通俗點講就是“可定寬高的堆在一起”顯示

為什么會有間隙

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

解決方案

知道了原因，方案就好找了，我把它分為以下幾種

原始狀態(tài)

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

1、改變書寫結(jié)構(gòu)

<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>

效果圖

以上幾種均可以完美的達(dá)到去除間隙的作用

但是，從代碼的可讀性上看，或多或少有一些不足

2、打包工具

使用打包工具或者自寫腳本，在上線前將響應(yīng)HTML代碼打包成一行，即可

3、丟失結(jié)束標(biāo)簽

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

此方法雖然可以解決此問題，但是在Doctype為xhtml時將報錯，所有方法是否適用須視情況而定。

4、css hack

知道間隙的產(chǎn)生原因和間隙的大小后，動手寫一個css hack也是一種很好的方法

1、將父容器的字體大小設(shè)置為0，可解決絕大多數(shù)瀏覽器（老版本safari不支持）

2、針對不支持上條的瀏覽器設(shè)置字塊或字符間間隙letter-spacing／word-spacing，推薦letter-spacing，因為此屬性不會產(chǎn)生負(fù)間隙，但需要注意，要在子元素上設(shè)置letter-spacing:0

3、如果你轉(zhuǎn)化但是塊對象，那需要為低版本瀏覽器設(shè)置inline兼容，不讓樣式會亂掉

總結(jié)以上幾點給出以下代碼

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論