CSS中跨瀏覽器的inline-block實現

2020-03-24 19:20:29

字體：大中小

來源：轉載

供稿：網友

我們在制作網頁時，有時會希望一個元素既能像 block 一樣定義寬度和高度，又可以像普通的 inline 一樣不斷行。例如下面這張圖片中紅線標出的地方：
a href=”#” img src=”….” alt=”….” / /a 這樣雖然可以達到目的，但相對來說代碼還是不夠精煉，也不夠靈活。而理想的方式，我們僅通過下面的代碼即可實現：
這樣一來，我們就需要對 a 標簽指定 width height 和 background-image。但 a 標簽默認的 display 屬性是 inline，width、height 是無效的。而如果對 a 設置 display:block，雖然可以解決寬度高度的問題，但元素會自動斷行，無法達到我們需要的效果。有沒有什么方式可以實現類似 img 標簽那樣，既可以設定高度寬度，又不會自動斷行呢？答案是肯定的。在 Opera 和 Webkit 中支持一個 CSS2 的屬性 display: inline-block。利用這個屬性，在 Opera 下即可完全實現我們所需的效果，但在其它瀏覽器下就不行了。 display 屬性另外還有一個不太常用的值 display: inline-table。利用這個值也可以完全實現我們所需的效果。這個屬性被除了 IE 以外的所有瀏覽器正確支持，但是…… 呃，又是 IE。雖然在面對 CSS 的時候所有 Web Developer 都會恨之入骨，但放棄 IE 就等于放棄 70% 的用戶，所以我們還是得找出其它的解決方案。沒轍了，只好 Google，結果還真給我找到了。在這篇文章中指出，如果你首先觸發 IE 的 hasLayout，然后再設置它的 display: inline，這個元素將變為 inline-block! 這樣一來，我們就可以利用 IE 這個不可理喻的特點，結合一些 CSS Hacks，給出兼容各種瀏覽器的 CSS 代碼：
display: -moz-inline-stack; //Firefox only code display: inline-block; //some standard browsers zoom: 1; //IE only *display: inline; //Only IE know this code (CSS Hack) } 通過這樣的代碼就可以實現在各種瀏覽器中表現一致的 inline-block 了。不過這種方式有個小缺憾，就是無法通過 W3C CSS 驗證。當然，要想通過驗證也很簡單，可以對除了 IE 之外的瀏覽器發出 inline-table 屬性的樣式表，對于 IE 單獨發出一份 IE Only 的 CSShtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：在html、css和js代碼中有關注釋規范用法小結

下一篇：比較css3中transition和animation的區別與聯系