最近在為自己做個新站，想到了些效果，實現時碰到了些小麻煩，例如這個 inline block。所幸大多數問題都解決了，所以就寫出來分享一下。
我們在製作網頁時，有時會希望一個元素既能像 block 一樣定義寬度和高度，又可以像普通的 inline 一樣不斷行。例如下面這張圖片中紅線標示的地方：
通常我們實現這樣的效果會使用這樣的程式碼：
Example Source Code
[www.downcodes.com] <a href=”#”><img src=”….” alt=”….” /></a>
這樣雖然可以達到目的，但相對來說程式碼還是不夠精煉，也不夠靈活。而理想的方式，我們僅透過下面的程式碼即可實現：
Example Source Code
[www.downcodes.com] <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 程式碼：
Example Source Code
[www.downcodes.com] .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。
