html - 水平菜单问题

Question

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

这是它在 IE 和 Firefox 中的显示方式:

这是它在 Chrome、Safari 和 Opera 中的显示方式:

我一直收到该死的溢出!可能是什么问题？

我的客服:

.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 标签(style.css 第 186 行)上使用了 font-size:120% 造成的。

当您在 firefox 中打开 firebug 或在 chrome 中打开开发人员工具时，请注意“计算样式”部分中 chrome 将 120% 渲染为 17px，而 firefox 将其渲染为 16.8px。

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