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

我們在製作網頁時，有時會希望一個元素既能像 block 一樣定義寬度和高度，又可以像普通的 inline 一樣不斷行。例如下面這張圖片中紅線標出的地方：

 

   通常我們實現這樣的效果會使用這樣的代碼：

 

<a href=”#”><img src=”….” alt=”….” /></a>

    這樣雖然可以達到目的，但相對來說代碼還是不夠精鍊，也不夠靈活。而理想的方式，我們僅通過下面的代碼即可實現：

 

<a href=”#”>Yangliu.name</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 代碼：

 

.element-class {     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 的 CSS。