inline-block對於各家瀏覽器的呈現

將清單設定為水平的方式最常用的方法就是對 li 設定 float:left ，用久了亦會過於乏味。最近在案子中 Amos 使用到 display:inline 也是不錯的選擇，只不過配合使用的 inline-block 此屬性對於 IE6、IE7 有些小小的問題。請看下列示範 ~

如果設定 li 為 inline 屬性，在每個瀏覽器中測試出來的結果是每個 li 區塊間都會有一點小空間，並不是使用 margin 所造成的。如下圖所示:

此時，再將 a 與 span 設定為 display:inline-block 並套用 background 後所呈現(適當控制文字色彩與高度)以下效果。要注意:在 IE6、IE7 中，游標移置區塊上會發現到並不會出現”手指符號”，由此可見~ IE6、IE7 對於 inline-block 這種屬性設定值有待加強。其實，只要再加上 cursor:pointer 就解決了此問題。

接下來，就是設定 a 與 span 的 background-position 與 padding 這兩種屬性設定並適當控制文字大小。此時，Away 又發現到了小問題，在 IE6、IE7、IE8 中最右邊的”中文”按鈕文字位置有些怪怪的。

所以，Away 又為 li 增加了 vertical-align:top 這項屬性設定即完成了 IE 三個版本的問題。

最後，只要再加上 a:hover 與 a:hover span 的 background-position 即可。

測試瀏覽器~ IE6、IE7、IE8、FireFox、Chrome、Safari