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

我对我为网站实施的水平菜单有一个小问题。该菜单只包含三个项目，但在相当大的宽屏幕显示器上查看时，最后一个项目会折叠到新的一行。由于我的客户使用宽屏显示器，所以我实际上无法对此进行测试，虽然我无法重现错误，但他们向我发送了此屏幕截图。水平菜单显示器在宽屏显示器上显示不正确

enter image description here

客户端是在Windows 7上使用Internet Explorer 8，我已经测试了这个浏览器和操作系统正常尺寸的显示器，这似乎努力。这似乎是问题的宽屏。

这里是页面的外观我的屏幕上，和所有其他后续屏幕我测试过的。

enter image description here

这里是我对菜单的代码。

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

任何人都可以找出我的代码中的任何明显的错误可能产生这个错误？

来源

2011-05-23 Liam Spencer

我建议可以发布您的代码的一个活生生的例子，让人们有宽屏显示器和IE8能看看自己。也就是说，尽管没有适当的显示器，你可能有一种方法可以测试这个：你是否尝试过使用CSS来给html标签一个宽度为1280px的宽度（或者其他一些宽屏尺寸）？如果你这样做，会有水平滚动条，但内容应该全部按照宽屏幕的方式布置和显示。 – DavidJCobb 2011-05-23 09:38:13

这是一个聪明的想法，我会试试看。 – 2011-05-23 09:39:44

的问题是，他们已经得到了他们的“文字大小”设置为“较大”（或者是“最大”）：

enter image description here

Your code is here，它看起来酷似客户与截图IE8中的“更大”文本。现在

可以重现该问题，你应该能够解决这个问题。

我提供更好的指导，但很难不能够看到整个网站这样做。

“宽屏监视器”部分不相关 - 您在最外面的容器（.menu）上声明width: 960px。无论屏幕宽度是多少，它都是960px。

来源

2011-05-23 09:41:42 thirtydot

谢谢你的回答，我已经设法重现错误，这对我来说已经足够好了，因为我现在可以自己解决问题。我将在未来的发展中铭记这一点。再次感谢。 – 2011-05-23 09:53:42

尽量减少.nav项，.nav一些宽度和。菜单

如果这不帮助你，那么可以请你提供这何处被托管的链接。以便我们可以检查并快速回复您。

来源

2011-05-23 09:32:30 user765671

-1

我建议你玩了一下你的宽度标签。

如何删除“nav”中的那个？

对不起，这是不是在这里问的问题。这个问题很容易解决，你可以计算出自己，如果你试图改变的东西......

我对这个问题的最好的建议是，你得到一个体面的工具来“测试” CSS和看到的结果“活”。我很满意Firefox/Chrome FireBug扩展（但它不保存结果，你必须复制&粘贴它）。

来源

2011-05-23 09:34:57 tiktak

如果你仔细阅读了这个问题，你会注意到，除了客户端宽屏显示器外，它实际上可以用于我所做的所有测试。我无法访问此监视器，因此想知道是否对这个问题有一个确定的答案，而这个问题不需要我去我的客户办公室并在那里做这项工作！ – 2011-05-23 09:38:06

试试这个 .nav-item { font-size：2em; margin-left：5em; }

当然，如果Chrome（用户的浏览器）太大地增加它们的文本大小，无论它如何使用ems，因为它们当然是基于文本大小。

<subjective> 一般来说，它最好的做法是使用百分比来表示文本大小，并使用像素边距/填充/距离来获得浏览器之间的最佳一致性。

而且使用复位CSS（如YUI基本复位fonts.css）是一个好主意太 </subjective>

来源

2011-05-23 09:51:38 colinross

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

回答

相关问题