css - CSS 水平菜单问题：在 IE7 中不起作用

Question

你能帮我修复这个页面上的菜单吗？菜单列表项没有定义宽度，因此它们在 IE7 中以 100% 的宽度显示。如果我让 span.right 有一个 float: left，它可以解决问题，但是圆角不起作用。一个可能的解决方案可能是摆脱正确的跨度并为锚设置填充和背景图像，但这会：a）阻止我能够使用锚上的背景图像（对于这种情况，我想纯色会做）和b）要求我将menu.png分成单独的图像文件。

如果大家有什么好的建议，请告诉我。谢谢！

Answer 1

如果将实际文本移动到中间，介于<span class="left"></span>和之间<span class="right"></span>，并将其包含在<span>标签中：

<li><a href="#">
    <span class="left"></span>
    <span>Home</span>
    <span class="right"></span>
</a></li>

然后，您可以添加 CSS 规则：

#menu ul li a span
{
    float: left;
}

然后float: left;从span.left和中删除span.right。这应该在 Firefox 和 IE 7 上都可以正常工作，我假设大多数其他浏览器也是如此。当然，这只有在您可以稍微重构 HTML 时才有效。