CSS菜单栏文本问题
我正在尝试创建一个菜单栏，其中包含一系列水平排列的图标和文本。我使用无序列表作为容器，但遇到问题。所有不包含文本、仅包含背景图像的空锚标记的菜单项都可以很好地内嵌显示。
但是，每当我尝试使用文本而不是背景图像作为菜单项时，文本列表项就会向下滑动。您可以在 JSFiddle 上看到此示例，请务必滚动每个项目以查看背景颜色指示器的行为：http ://jsfiddle.net/pAfgm/6/。
请注意每个带有地球图标的链接（是的，在本例中我是从 Facebook 热链接的）如何显示得漂亮而整洁。然而，文本和它的背景指示符远远偏离对齐。我发现 FF 3.6、Opera 11 是这样，但 IE7 不是这样！这一次，IE7 不再出现其他浏览器存在的问题。
有人可以告诉我如何纠正这个问题吗？
谢谢您的宝贵时间！
I am trying to create a menu bar which will consist of a series of icons and text laid out horizontally. I am using an unordered list as the container, but I am having a problem. All of the menu items which contain no text, just an empty anchor tag with a background image, display in-line just fine.
However, whenever I try to use text, instead of a background image as a menu item, the text list item is slid downward. You can see this example on JSFiddle, be sure to rollover each of the items to see how the background color indicator behaves: http://jsfiddle.net/pAfgm/6/.
Notice how each of the links with a globe icon (yes, I hot-linked from Facebook for this example) displays nice and neat. However the text and it's background indicator are way off alignment. I see this is the case for FF 3.6, Opera 11, but not IE7! For once, IE7 isn't having a problem where other browsers are.
Could someone please show me how I can correct this issue?
Thank you for your time!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（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/跨浏览器内联块/
You simply need to add
vertical-align: toptonav.pluginBar ul.pluginBarLeft li, on which you also havedisplay: inline-block.See: http://jsfiddle.net/pAfgm/7/
The default
vertical-alignvalue isbaseline, which is the cause of this problem.See the difference between different
vertical-alignvalues here:http://www.brunildo.org/test/inline-block.html
See the "baseline" section here for a graphical explanation:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/