CSS菜單欄文本問題

Question

我正在嘗試創建一個菜單欄，它將包含一系列水平放置的圖標和文本。我使用無序列表作爲容器，但是我遇到問題。所有不包含文本的菜單項，只是一個帶有背景圖像的空錨定標記，都可以在線顯示。

但是，每當我嘗試使用文本而不是背景圖像作爲菜單項時，文本列表項就會向下滑動。您可以在JSFiddle上看到此示例，請確保翻轉每個項目以查看背景顏色指示器的行爲方式：http://jsfiddle.net/pAfgm/6/。

請注意，每個帶有地球圖標的鏈接（是的，我爲此示例中的Facebook熱鏈接）顯示的很好，整潔。然而，文本和背景指示符是不對齊的。我看到這是FF 3.6，Opera 11，但不是IE7的情況！有一次，IE7在其他瀏覽器沒有問題的地方。

有人可以告訴我怎樣才能糾正這個問題嗎？

謝謝你的時間！

Answer 1

您只需將vertical-align: top添加到nav.pluginBar ul.pluginBarLeft li，其中您還有display: inline-block。

參見：http://jsfiddle.net/pAfgm/7/

默認vertical-align值是baseline，這是這個問題的原因。

在這裏看到不同vertical-align值之間的差異：
http://www.brunildo.org/test/inline-block.html

參見 「基線」 一節這裏的圖形解釋：
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/