我正在尝试创建一个菜单栏，其中包含一系列水平放置的图标和文本。我使用无序列表作为容器，但我遇到了问题。所有不包含文本的菜单项，只有一个带有背景图像的空 anchor 标记，都可以很好地在线显示。
但是，每当我尝试使用文本而不是背景图像作为菜单项时，文本列表项都会向下滑动。您可以在 JSFiddle 上看到这个示例，一定要翻转每个元素以查看背景颜色指示器的行为方式:http://jsfiddle.net/pAfgm/6/ .
请注意每个带有地球图标的链接(是的，在本例中我从 Facebook 热链接)如何显示得漂亮而整洁。然而，文本和它的背景指示器偏离了对齐方式。我看到 FF 3.6、Opera 11 是这种情况，但 IE7 不是!这一次，IE7 没有其他浏览器的问题。
有人可以告诉我如何解决这个问题吗？
感谢您的宝贵时间!
最佳答案
你只需要添加 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/
关于CSS 菜单栏文本问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6720656/