css inline-block屬性各瀏覽器兼容以及水平間隙問題如何解決

這篇文章主要介紹了css inline-block屬性各瀏覽器兼容以及水平間隙問題如何解決，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

inline-block屬性 說明：

設置這個值之后對象自己呈遞為內聯對象，但是對象內的內容作為 block boxes 呈遞。也就是說設置了這個值的元素就等于可以在一個可以包含 block boxes的 inline box元素。而話說IE6、7雖然是能支持 inline-block 的，但是在他們眼里display:inline-block只是觸發(fā)layout 的一個條件，而非W3C規(guī)定的東西。不過我們正好可以利用IE的layout來模擬實現display:inline-block的效果。

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

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

1. 其中在所有能觸發(fā)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聲明中，有時稍不注意就可能搞錯了，出發(fā)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 的方案了，接下來要解決是：在不同瀏覽器下看下面的例子：

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

然后我們發(fā)現在支持display:inline-block屬性的瀏覽器中 inline 和 block 元素 display:inline-block 后均會產生水平空隙；而在IE67以及IE（Q）模擬 display:inline-block 后分兩種情況：模擬之后的塊元素沒有間距，而內聯元素有間隙。為什么？這里再補充一個知識點：inline元素在默認狀態(tài)下排列都是有間隙的。所以以上現象就又如下解釋了：

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

效果圖：

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

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

如果是靜態(tài)的話我們這么做確實沒多大問題，假如是后臺直接生成的呢？或者以后維護同事看到這代碼怎么這么寫的，改回來了呢。所以用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;
}

效果圖：

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 元素有效 。
   

inline-block的優(yōu)點

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

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

1. 能使用vertical-align和text-align實現垂直、水平、兩邊、基線等等對齊，而且還是自適應的哦。

2. 因為自身原因，所以特別適合流體布局。高度和寬度不用定死。

感謝你能夠認真閱讀完這篇文章，希望小編分享css inline-block屬性各瀏覽器兼容以及水平間隙問題如何解決內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!