這篇文章主要介紹了css inline-block屬性各瀏覽器兼容以及水平間隙問題如何解決，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
站在用戶的角度思考問題，與客戶深入溝通，找到東陽網(wǎng)站設(shè)計(jì)與東陽網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋東陽地區(qū)。
inline-block屬性 說明：
設(shè)置這個(gè)值之后對象自己呈遞為內(nèi)聯(lián)對象，但是對象內(nèi)的內(nèi)容作為 block boxes 呈遞。也就是說設(shè)置了這個(gè)值的元素就等于可以在一個(gè)可以包含 block boxes的 inline box元素。而話說IE6、7雖然是能支持 inline-block 的，但是在他們眼里display:inline-block只是觸發(fā)layout 的一個(gè)條件，而非W3C規(guī)定的東西。不過我們正好可以利用IE的layout來模擬實(shí)現(xiàn)display:inline-block的效果。
inline-block各個(gè)瀏覽器的兼容方案
有兩種方法，都是先觸發(fā)IE的layout，然后再定義 display:inline，讓塊元素自身呈遞為內(nèi)聯(lián)對象，如下：
1. 其中在所有能觸發(fā)layout的屬性中，排除position:absolute 和浮動(dòng)以及width，height之后，能用的就只有display:inline-block了,如下：
重慶分公司
重慶分公司
fn-ib{display:inline-block;}fn-i{*display:inline;}注意 兩個(gè)display 要先后放在兩個(gè) CSS 聲明中才有效果，如果先定義了 display:inline-block，然后再將 display 設(shè)回 inline 或 block，layout 不會消失。
2. 第一種方法要放在兩個(gè)CSS聲明中，有時(shí)稍不注意就可能搞錯(cuò)了，出發(fā)IE的layout還有 zoom:value，代碼如下：
fn-ibz{display:inline-block;*display:inline;*zoom:1}從上我們看出IE6、7是支持屬性 inline-block的，只是沒有實(shí)現(xiàn)W3C的效果，所以我們利用layout再display:inline來模擬inline-block屬性的效果。
好了，現(xiàn)在有解決各個(gè)瀏覽器 inline-block 的方案了，接下來要解決是：在不同瀏覽器下看下面的例子：
inline-block元素在不同瀏覽器下有間隙是inline自身的性質(zhì)，不是bug
然后我們發(fā)現(xiàn)在支持display:inline-block屬性的瀏覽器中 inline 和 block 元素 display:inline-block 后均會產(chǎn)生水平空隙；而在IE67以及IE（Q）模擬 display:inline-block 后分兩種情況：模擬之后的塊元素沒有間距，而內(nèi)聯(lián)元素有間隙。為什么？這里再補(bǔ)充一個(gè)知識點(diǎn)：inline元素在默認(rèn)狀態(tài)下排列都是有間隙的。所以以上現(xiàn)象就又如下解釋了：
支持display:inline-block屬性的瀏覽器，其元素本身就相當(dāng)于inline元素，所以現(xiàn)代瀏覽器中都有間隙；而模擬的方案中，因?yàn)殡m然將塊元素設(shè)置 display:inline 能使其想行內(nèi)元素一樣水平排列，但是block 元素還是block 元素，不會真的變成inline 元素，所以就沒有空隙。
而產(chǎn)生空隙的根本原因是 HTML 中的換行符、空格符、制表符等字符產(chǎn)生了空白符。
inline-block之間的水平間隙問題解決方案
以上我們知道產(chǎn)生間隙的根本原因是HTML 中的換行符、空格符、制表符等字符，俺么我們把標(biāo)簽與標(biāo)簽之間的空格去掉，就不會有問題了么？所以代碼如下：
HTML代碼如下：
內(nèi)聯(lián)元素 內(nèi)聯(lián)元素 內(nèi)聯(lián)元素 內(nèi)聯(lián)元素塊元素塊元素塊元素塊元素
效果圖：
改變DOM結(jié)構(gòu)來解決inline-block之間的間隙問題
以上DEMO代碼我是做了處理的，所以我們就看不到間隙。但是問題由來了：
如果是靜態(tài)的話我們這么做確實(shí)沒多大問題，假如是后臺直接生成的呢？或者以后維護(hù)同事看到這代碼怎么這么寫的，改回來了呢。所以用CSS解決還是最好的途徑。我第一次看到這個(gè)情況第一反應(yīng)就是用margin負(fù)值來解決，后來知道產(chǎn)生空隙的根本原因之后，覺得margin負(fù)值方法雖然能夠解決，但是沒有對癥下藥，間隙產(chǎn)生原因的是HTMl間的換行符、空格符、制表符等字符，而間隙會隨著字體大小等屬性變化而變化。所以就可以用CSS控制字符大小來找出一個(gè)。所以參考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的間隙的方案
然后我們分析每一行代碼的作用：
font-size的作用：既然是字符引起的，當(dāng)然是把他們的font-size設(shè)置為0,然后再元素內(nèi)font-size大小設(shè)回原來的大小。除了IE6、7以及低版本的chrome和 Safari的其他瀏覽器inline-block間隙到這一步就沒了(低版本的chrome因?yàn)樵O(shè)置font-size:0之后，不能讓文字自由伸縮，所以不推薦)
word-spacing的作用：在IE6、7以及IE（q）模式下，始終有1px的間距，然后我們就利用word-spacing:-1px來解決(單詞之間的距離，只對英文有用，中文沒有單詞這概念)，然后再元素內(nèi)設(shè)回normal。當(dāng)然使用margin:0 0 0 -1px;也是可以的（貌似代碼還少了…）
letter-spacing的作用：剩下就只有低版本的chrome和 Safari了，letter-spacing是調(diào)整文字之間的間距，因?yàn)閘etter-spacing跟font-size和font-family甚至不同瀏覽器都是有差別的，所以按照 《letter-spacing與字體大小/字體關(guān)系的數(shù)據(jù)表》上面的數(shù)據(jù)來設(shè)置，就能將間隙取消。然后因?yàn)閘etter-spacing和word-spaacing在一起容易出事，所以加了 *letter-spacing:normal; 這句代碼。
vertical-align:top的作用：最后講的這個(gè)跟間隙無關(guān)，設(shè)置vertical-align:top是為了讓 inline-block 元素以top基線對齊。vertical-align 屬性只在 inline、inline-block 元素有效 。
inline-block的優(yōu)點(diǎn)
這里不說inline-block布局比浮動(dòng)布局節(jié)省瀏覽器資源，我們就得拋棄浮動(dòng)布局，投向inline-block布局的懷抱（而且官網(wǎng)也沒這個(gè)說法），畢竟一個(gè)事物的出現(xiàn)畢竟有它存在的意義的，而且浮動(dòng)布局也是認(rèn)識度最高的布局方法。所以還是那句話，具體情況具體分析，明明使用浮動(dòng)布局結(jié)構(gòu)更清晰的，你非得用 inline-block而增加了大量亢余代碼，就算 inline-block布局 真的像傳說中的那樣最不耗資源，但是你html代碼增加了不也是耗資源了么。
就算有，我也覺得不大。所以改用絕對定位就用絕對定位，改用浮動(dòng)就用浮動(dòng)，如果碰到一個(gè)情況使用 inline-block 能更好的解決問題，那就大膽的用吧。畢竟inline-block相較與浮動(dòng)和絕對定位還是有一些有點(diǎn)的。
能使用vertical-align和text-align實(shí)現(xiàn)垂直、水平、兩邊、基線等等對齊，而且還是自適應(yīng)的哦。
因?yàn)樽陨碓颍蕴貏e適合流體布局。高度和寬度不用定死。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css inline-block屬性各瀏覽器兼容以及水平間隙問題如何解決內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!
