inline-block各瀏覽器安全色以及水平間隙問題解決方案

標籤：

inline-block屬性

This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as a replaced element on the line.

以上W3C對 inline-block的官方說明，意思就是說設定這個值之後對象自己呈遞為內聯對象，但是對象內的內容作為 block boxes 呈遞。也就是說設定了這個值的元素就等於可以在一個可以包含 block boxes的 inline box元素。而話說IE6、7雖然是能支援 inline-block 的，但是在他們眼裡display:inline-block只是觸發
layout 的一個條件，而非W3C規定的東西。不過我們正好可以利用IE的layout來類比實現display:inline-block的效果。

inline-block各個瀏覽器的相容方案

有兩種方法，都是先觸發IE的layout，然後再定義 display:inline，讓塊元素自身呈遞為內聯對象，如下：

1. 其中在所有能觸發layout的屬性中，排除position:absolute 和浮動以及width，height之後，能用的就只有display:inline-block了,如下：
   

   fn-ib{display:inline-block;}fn-i{*display:inline;}

   注意 兩個display 要先後放在兩個 CSS 聲明中才有效果，如果先定義了 display:inline-block，然後再將 display 設回 inline 或 block，layout 不會消失。

2. 第一種方法要放在兩個CSS聲明中，有時稍不注意就可能搞錯了，出發IE的layout還有 zoom:value，代碼如下：

    

   fn-ibz{display:inline-block;*display:inline;*zoom:1}

從上我們看出IE6、7是支援屬性 inline-block的，只是沒有實現W3C的效果，所以我們利用layout再display:inline來類比inline-block屬性的效果。

好了，現在有解決各個瀏覽器 inline-block 的方案了，接下來要解決是：在不同瀏覽器下看下面DEMO：

DEMO

inline-block元素在不同瀏覽器下有間隙是inline自身的性質，不是bug

然後我們發現在支援display:inline-block屬性的瀏覽器中 inline 和 block 元素 display:inline-block 後均會產生水平空隙；而在IE67以及IE（Q）類比 display:inline-block 後分兩種情況：類比之後的塊元素沒有間距，而內嵌元素有間隙。為什嗎？這裡再補充一個知識點：inline元素在預設狀態下排列都是有間隙的。所以以上現象就又如下解釋了：

支援display:inline-block屬性的瀏覽器，其元素本身就相當於inline元素，所以現代瀏覽器中都有間隙；而類比的方案中，因為雖然將塊元素設定 display:inline 能使其想行內元素一樣水平排列，但是block 元素還是block 元素，不會真的變成inline 元素，所以就沒有空隙。

而產生空隙的根本原因是 HTML 中的分行符號、空格符、定位字元等字元產生了空白符。

inline-block之間的水平間隙問題解決方案

以上我們知道產生間隙的根本原因是HTML 中的分行符號、空格符、定位字元等字元，俺麼我們把標籤與標籤之間的空格去掉，就不會有問題了嗎？所以代碼如下：

HTML代碼如下

<div class="parent">    <strong class="fn-ibz">內嵌元素</strong><strong class="fn-ibz">    內嵌元素</strong><strong class="fn-ibz">    內嵌元素</strong><strong class="fn-ibz">    內嵌元素</strong></div><div class="parent">    <div class="fn-ibz">塊元素</div><div class="fn-ibz">    塊元素</div><div class="fn-ibz">    塊元素</div><div class="fn-ibz">    塊元素</div></div>

DEMO如下

改變DOM結構來解決inline-block之間的間隙問題

以上DEMO代碼我是做了處理的，所以我們就看不到間隙。但是問題由來了：

如果是靜態話我們這麼做確實沒多大問題，假如是後台直接產生的呢？或者以後維護同事看到這代碼怎麼這麼寫的，改回來了呢。所以用CSS解決還是最好的途徑。我第一次看到這個情況第一反應就是用margin負值來解決，後來知道產生空隙的根本原因之後，覺得margin負值方法雖然能夠解決，但是沒有對症下藥，間隙產生原因的是HTMl間的分行符號、空格符、定位字元等字元，而間隙會隨著字型大小等屬性變化而變化。所以就可以用CSS控制字元大小來找出一個。所以參考YUI3中解決的方案，我得到如下代碼：

CSS代碼

.f-w-p-parent{    font-size:0;    letter-spacing:-4px;    *letter-spacing:normal;    *word-spacing:-1px;}.f-w-p-inner{    font-size:12px;    letter-spacing:normal;    *word-spacing:normal;    vertical-align: top;}

DEMO

CSSinline-block的間隙的方案

然後我們分析每一行代碼的作用：

1. font-size的作用：既然是字元引起的，當然是把他們的font-size設定為0,然後再元素內font-size大小設回原來的大小。除了IE6、7以及低版本的chrome和 Safari的其他瀏覽器inline-block間隙到這一步就沒了(低版本的chrome因為設定font-size:0之後，不能讓文字自由伸縮，所以不推薦)
2. word-spacing的作用：在IE6、7以及IE（q）模式下，始終有1px的間距，然後我們就利用word-spacing:-1px來解決(單詞之間的距離，只對英文有用，中文沒有單詞這概念)，然後再元素內設回normal。當然使用margin:0 0 0 -1px;也是可以的（貌似代碼還少了…）
3. letter-spacing的作用：剩下就只有低版本的chrome和 Safari了，letter-spacing是調整文字之間的間距，因為letter-spacing跟font-size和font-family甚至不同瀏覽器都是有差別的，所以按照 《letter-spacing與字型大小/字型關係的資料表》上面的資料來設定，就能將間隙取消。然後因為letter-spacing和word-spaacing在一起容易出事，所以加了 *letter-spacing:normal; 這句代碼。
4. vertical-align:top的作用：最後講的這個跟間隙無關，設定vertical-align:top是為了讓 inline-block 元素以top基準對齊。vertical-align 屬性只在 inline、inline-block 元素有效 。而不設定vertical-align:top會出現什麼情況？點擊CSS詳解vertical-align繼續瞭解

inline-block的優點

這裡不說inline-block布局比浮動布局節省瀏覽器資源，我們就得拋棄浮動布局，投向inline-block布局的懷抱（而且官網也沒這個說法），畢竟一個事物的出現畢竟有它存在的意義的，而且浮動布局也是認識度最高的布局方法。所以還是那句話，具體情況具體分析，明明使用浮動布局結構更清晰的，你非得用 inline-block而增加了大量亢餘代碼，就算 inline-block布局 真的像傳說中的那樣最不耗資源，但是你html代碼增加了不也是耗資源了麼。

就算有，我也覺得不大。所以改用絕對位置就用絕對位置，改用浮動就用浮動，如果碰到一個情況使用 inline-block 能更好的解決問題，那就大膽的用吧。畢竟inline-block相較與浮動和絕對位置還是有一些有點的。

1. 能使用vertical-align和text-align實現垂直、水平、兩邊、基準等等對齊，而且還是自適應的哦。
2. 因為自身原因，所以特別適合流體布局。高度和寬度不用定死。

 

inline-block各瀏覽器安全色以及水平間隙問題解決方案