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

Question

你能帮我修一下这个this page的菜单吗？菜单列表项没有定义宽度，因此它们在IE7中以100％宽度显示。如果我使span.right有一个浮动：左，它解决了问题，但圆角不起作用。一个可能的解决方案可能是摆脱正确的跨度并为锚点设置填充和背景图像，但这将：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时才会有效。