水平菜单在宽屏监视器上显示不正确

问题描述

| 我为网站实现的水平菜单有一个小问题。该菜单仅包含三个项目，但是在相当大的宽屏显示器上查看时，最后一个项目似乎会折叠到新的一行。由于我的客户使用的是宽屏显示器，因此我无法亲自对此进行测试，尽管我无法重现错误，但他们还是向我发送了此屏幕截图。 客户端正在Windows 7上使用Internet Explorer 8，我已经在正常大小的监视器上测试了该浏览器和OS，该监视器似乎可以正常工作。问题似乎在于宽屏。 这是该页面在我的屏幕以及我测试过的所有其他后续屏幕上的外观。 这是我菜单的代码。 的HTML

<div class=\"menu\">
    <ul class=\"nav\">
        <li class=\"nav-item\" id=\"first-item\"><a href=\"/why-us.PHP\">WHY US</a></li>
        <li class=\"nav-item\"><a href=\"/links.PHP\">LINKS</a></li>
        <li class=\"nav-item\"><a href=\"/contact.PHP\">CONTACT</a></li>
    </ul>
</div>

的CSS

.nav-item {
    font-size:2em;
    margin-left:175px;
}

.nav-item a {
    color:#2B2F73;
}

.nav {
    list-style-type:none;
    padding:0;
    margin:auto;
    width:744px;
}

.nav li {
    list-style-type:none;
    float:left;
    display:inline;
}

#first-item {
    margin-left:0px !important;
}

.menu {
    width:960px;
    height:40px;
    margin:auto;
}

谁能在我的代码中发现任何可能导致此错误的明显错误？     

解决方法

问题在于他们已将其“文本大小”设置为“较大”（或也许是“最大”）： 您的代码在这里，看起来与IE8中带有\“ Larger \\”文本的客户端屏幕快照完全一样。 现在，您可以重现该问题，您应该可以解决它。 我会提供更好的说明，但是如果无法查看整个网站，很难做到。 \“宽屏监视器\”部分不相关-您在最外面的容器（

.menu

）上声明

width: 960px

。不管屏幕宽度是多少，都将是“ 4”。     ,尝试减少.nav-item，.nav和.menu中的某些宽度 如果这对您没有帮助，请您提供托管链接。这样我们就可以检查并迅速给您答复。     ,尝试这个     .nav-item {      font-size：2em;      左边距：5em;     } 当然，如果chrome（用户的浏览器）增加了他们的文本大小，那么如果您使用ems不管它最终会破坏什么，因为它们当然是基于文本大小的。

<subjective>

通常，最佳做法是使用百分比表示文本大小，使用像素表示边距/填充/距离，以实现浏览器之间的最佳一致性。 同样使用重置CSS（例如YUI base-reset-fonts.css）也是一个好主意

</subjective>

    ,我建议您稍微玩一下宽度标签。 删除\“ nav \”中的那一个怎么办？ 很抱歉，这不是在这里提出的问题。这个问题很容易解决，如果您尝试改变事情，就可以弄清楚自己... 我对这个问题的最佳建议是，您可以使用一个不错的工具来“测试” CSS并查看结果“实时”。 我对Firefox / Chrome FireBug扩展程序感到满意（但是它无法保存结果，您必须将其复制并粘贴）。