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

本文介绍了水平菜单在宽屏监视器上显示不正确的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我为网站实现的水平菜单有一个小问题.该菜单仅包含三个项目，但是在相当大的宽屏显示器上查看时，最后一个项目似乎会折叠到新的一行.由于我的客户使用的是宽屏监视器，因此我无法亲自对此进行测试，尽管我无法重现错误，但他们还是向我发送了此屏幕截图.

I have a small problem with a horizontal menu I have implemented for a website. The menu only contains three items, but when viewed on quite a large widescreen monitor, the last item appears to collapse on to a new line. I can't actually test this myself as the widescreen monitor is used by my client, and whilst I can't reproduce the error they have sent me this screenshot.

客户端正在Windows 7上使用Internet Explorer 8，我已经在正常大小的显示器上测试了该浏览器和操作系统，该显示器似乎可以正常工作.问题似乎是宽屏.

The client is using Internet Explorer 8 on Windows 7, and I have tested this browser and OS on a normal size monitor which seems to work. It seems to be the widescreen that is the problem.

这是该页面在我的屏幕以及我测试过的所有其他后续屏幕上的显示方式.

Here is how the page looks on my screen, and every other subsequent screen I've tested on.

这是菜单的代码.

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; }

谁能在我的代码中识别出任何可能导致此错误的明显错误?

Can anyone identify any glaring errors in my code that may be producing this error?

推荐答案

问题是他们将文本大小"设置为较大"(或也许是最大"):

The problem is that they've got their "Text Size" set to "Larger" (or perhaps "Largest"):

您的代码在这里，它看起来与IE 8中带有更大"文本的客户端屏幕截图完全一样.

Your code is here, and it looks exactly like the client's screenshot with "Larger" text in IE8.

现在您可以重现该问题，您应该可以解决它.

Now you can reproduce the problem, you should be able to fix it.

我会提供更好的说明，但是如果无法查看整个网站，很难做到这一点.

I'd provide better instructions, but it's difficult to do so without being able to see the entire site.

宽屏监视器"部分不相关-您在最外面的容器(.menu)上声明了width: 960px.不管屏幕宽度是什么，它都是960px.

The "widescreen monitor" part is not relevant - you're declaring width: 960px on the outermost container (.menu). It will be 960px no matter what the screen width is.