水平菜单问题

Question

我无法在IE9和Firefox中正确排列水平菜单。

这就是IE和Firefox中显示的内容：

这就是它在Chrome，Safari和Opera中的显示效果：

我一直在那个该死的溢出！ 可能是什么问题？

我的CS：

.service-list {
    position:absolute;
    top:0;
    left:0;
    display:block;
    width:960px;
}
#services-content .service-list li {
    float:left;
    display:inline;
}
#services-content .service-list li a {
    display:block;
    float:left;
    color:#F37FA8;
    text-decoration:none;
    padding:0 20px;
    background-color:pink;
    font-weight:400;
}
#services-content .service-list li a:hover {
    text-decoration:underline;
}
#services-content .service-list li.last a {
    padding-left:20px;
    padding-right:0;
}
#services-content .service-list li.first a {
    padding-left:0 !important;
}

菜单由wordpress吐出。

谢谢，

尼克

Answer 1

查看您发布的网站上的css。不一致可能是由于您在a标签上使用font-size:120%（style.css的第186行）引起的。

当您在firefox中打开firebug或在chrome中打开开发人员工具时，请注意计算出的样式＆＃39; Chrome渲染120％为17px而firefox渲染为16.8px的部分。

浏览器如何以不同的方式呈现这一点有点超出范围，但您可能希望尝试使用像素或ems。希望这会有所帮助。

Answer 2

问题在于每个项目之间有一个40像素的空间，并且每个项目都会向左浮动，这样当每行中没有足够的空间时，所有内容都会被包裹。

您可以尝试将padding: 0 20px;中的#services-content .service-list li a更改为更小的内容，例如padding: 0 10px;