【发布时间】：2013-06-15 01:18:41
【问题描述】：
大家好，
我正在为当地的天文俱乐部开发一个网站，我正在免费做这个网站，以建立我的投资组合和技能组合。
我在页面顶部的标题中有一个导航栏。当我缩小到大约 90% 时，导航栏中的元素会四处移动，导致布局看起来有点时髦。
如果有帮助，我在
上有一个活生生的例子http://www.JamesRobertCook.com/BCAAS/
这是我的导航栏的 HTML：
<div id="header_bar">
<div id="nav">
<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
</div>
这里是相关的 CSS：
#header_bar {
background: rgba(44, 44, 44, 0.75);
height: 36px;
margin: 0 auto;
}
#nav {
height: 36px;
margin: 0 auto;
width: 960px;
}
#cssmenu {
height: 36px;
background-color: rgb(44, 44, 44)s;
}
#cssmenu ul {
margin: 0;
padding: 0;
}
#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;
#cssmenu > ul > li > a {
color: rgb(160,160,160);
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 36px;
padding: 15px 85px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
我认为将其粘贴在容器中并为其提供固定的高度/宽度可以解决问题，但我在本地尝试过，但没有成功。
感谢您的帮助！如果可能，您能否解释一下我做错了什么？我想从我的错误中学习！
谢谢！
编辑
我刚刚注意到，在缩放时，我的三个“特色”框中的内容也与它所在的相应 div 重叠！我当然弄坏了一些东西。
【问题讨论】：
-
我通常只是让我的网站在人们乱用缩放时爆炸。如果您想尝试防止缩放，请查看：stackoverflow.com/questions/14050841/…
-
@KaiQing 你在移动设备上遇到过问题吗？我对此的担忧是 iPad/Smart Phone 用户会被抛在后面。想法？
-
对于移动设备，您可以使用元缩放级别。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> -
感谢您的信息！一个快速的谷歌提供了我需要知道的关于元缩放的所有信息。尽管如此，仍在寻找解决我的问题的方法，这一定是导致它的愚蠢行为。总是很傻。
-
@KaiQing - 那些需要大一点字体的人呢？讨厌他们？