Question

div+css 在不同分辨率下的奇怪现象？

最近在做一个网站，在本机测试发现效果很好，但是发现换到其它分辨率的电脑上，页面出现变动。这些变动主要出现在有浮动的元素中，原本固定宽度的div（比如导航栏），在本机可以一排显示，但是在其他电脑上出现换行？一个比较难以理解的现象。
我也查了相关资料，估计跟分辨率和像素有关系，但是很遗憾，我现在确实没有能力解决，想请大家帮忙解决，谢谢！
示例代码如下：(这个是一个导航栏，在我的电脑上显示正常1024*768，如果再其它，情况就很难说了！)
<div id="navi" class="navi">
<a href="">首页</a>
<a href="">新闻</a>
<a href="">介绍</a>
<a href="">信息</a>
<a href="">阵容</a>
<a href="">管理</a>
<a href="">合作</a>
<a href="">发展</a>
<a href="">中心</a>
<a href="">下载</a>
</div>
------------------------
如下是css代码：
.navi{width:900px; font-size:1.2em; margin:auto; padding:0; color:#fff;}
.navi a{text-decoration:none; width:80px; padding:4px; border:solid 1px #fff; margin:0; color:#fff; background-color:#8ab; text-align:center; display:block; float:left;}
.navi a:link, .navi a:visited{border-color:#def #678 #345 #cde; color:#fff; position:relative;}
.navi a:hover{border-color:#345 #cde #def #678; background: #ccccff; color:blue; top:3px; left:3px;}
呵呵，关于那个id和class的命名，谢谢提醒。现在问题是，我在高分辨率的电脑上（>1024），就出现换行，当然我还没有试过低分辨率（<1024），麻烦你们再看看，谢谢！

Answer 1

主要是IE6的折行，并不是因为分辨率的原因，其实只要所有a的总宽度不要超过.navi的宽度就不会换行，问题出现在display:block，可能是IE6的一个bug，你换成display:table或display:block-inline就可以了

Answer 2

你的电脑 1024*768 导航栏 固定宽900 所以在你电脑上显示没问题。
其他电脑出现换行说明<1024 一般都是 800*600 的 ；你试验的电脑分辨率
< 900 所以换行。
在这里我劝搂主一句：现在的显示器硬件绝大多数都>=1024分辨率；小于1024的你完全可以不考虑。说白了你不用改你的设计。
就像去看电影必须买电影票，没票？对不起，不能进。你不需要为买不起票的人另建一个免票影院。

Answer 3

别的先不说,首先我就无法理解你ID和class用同样的命名,这是不规范的
还有,做了float就要记得clear之....
至于换自动折行的问题,你把<a>的display:block换成display:block-inline;zoom:1; 再试试

Answer 4

我在我电脑上试了。各种分辩率情况下都不换行。ie8,google 的chrome.