css inline-block屬性各瀏覽器相容以及水平間隙問題解決方案-css教學-PHP中文網

本章為大家介紹css inline-block屬性各瀏覽器相容以及水平間隙問題解決方案。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

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 的方案了，接下來要解決是：在不同瀏覽器下看下面的範例：

css inline-block屬性各瀏覽器相容以及水平間隙問題解決方案

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>

登入後複製

效果圖：

css inline-block屬性各瀏覽器相容以及水平間隙問題解決方案

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

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

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

.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;
}

登入後複製

效果圖：

css inline-block屬性各瀏覽器相容以及水平間隙問題解決方案

CSSinline-block的間隙的方案

#接著我們分析每一行程式碼的作用：

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

inline-block的優點

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

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

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

以上是css inline-block屬性各瀏覽器相容以及水平間隙問題解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！