首頁 >web前端 >css教學 >css inline-block屬性各瀏覽器相容以及水平間隙問題解決方案

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

青灯夜游
青灯夜游原創
2018-09-13 15:58:201846瀏覽

本章為大家介紹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的間隙的方案

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

  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的優點

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

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

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

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

#

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn