Question

css+div为什么经常会在设计模式下错位，但预览的时候就正常显示呢？？？

css+div为什么经常会在设计模式下错位，但预览的时候就正常显示呢？？？补充如图

代码如下
html部分：
<div id="header">
<div class="top">
<ul>
<li><a href="#">充值</a></li>
<li><a href="#">安全</a></li>
<li><a href="#">客服</a></li>
<li><a href="#">招聘</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">家长监护</a></li>
</ul>
</div>
<div class="header_m">
<div class="logo"><a href="#">腾讯游戏</a></div>
<div class="header_m_r">
<p>游戏人生是一个玩家社区，您可以和千万玩家一起创造快乐。<input type="button" value="登录我的游戏人生" class="login_btn" />
</p>
<div class="nav">
<ul>
<li class="nav_01"><a href="#"> </a></li>
<li class="nav_02"><a href="#"> </a></li>
<li class="nav_03"><a href="#"> </a></li>
<li class="nav_04"><a href="#"> </a></li>
<li class="nav_05"><a href="#"> </a></li>
<li class="nav_06"><a href="#"> </a></li>
</ul>
</div>
</div>
</div>
</div>

css部分：
#header{width:100%; overflow:hidden; background:url(../images/home/header_bg.gif) repeat-x; height:114px; overflow:hidden;}
.top{width:980px; overflow:hidden; margin:2px auto 0;}
.top ul{float:right;}
.top li{float:left; margin-left:20px; line-height:28px;}
.top li a{text-decoration:underline; color:#86929e;}
.top li a:hover{text-decoration:none;}
.header_m{width:980px; margin:10px auto 0; overflow:hidden;}
.logo{background:url(../images/home/logo.gif) no-repeat; width:320px; height:65px; float:left; text-indent:-9999px;}
.logo a{width:170px; height:65px; display:block;}
.header_m_r{float:right; text-align:right;}
.header_m_r p{background:url(../images/home/icon.gif) 105px no-repeat; line-height:22px; color:#777e86;}
.nav{float:right;}
.nav ul{margin-top:15px;}
.nav li{float:left; height:19px;}
.nav li a{display:block;}
.nav li a:hover{text-decoration:none;}
.nav li.nav_01 a{width:72px; background:url(../images/home/nav_01.gif) no-repeat;}
.nav li.nav_02 a{width:93px; background:url(../images/home/nav_02.gif) no-repeat;}
.nav li.nav_03 a{width:93px; background:url(../images/home/nav_03.gif) no-repeat;}
.nav li.nav_04 a{width:93px; background:url(../images/home/nav_04.gif) no-repeat;}
.nav li.nav_05 a{width:121px; background:url(../images/home/nav_05.gif) no-repeat;}
.nav li.nav_06 a{width:90px; background:url(../images/home/nav_06.gif) no-repeat;}
.login_btn{background:url(../images/home/btn_bg.gif) no-repeat; width:108px; height:19px; border:none; font-size:12px; color:#7f8488;}





Answer 1

我的修改方法是这样的：
.top li{float:left; margin-left:20px; line-height:28px; width:52px; text-align:center}

这个应该能显示的吧。不会被选为无效的吧。。。。。百度写这么多代码很容易被pass掉 的，

Answer 2

预览和真正浏览器的渲染机制不同 你应该以真实浏览器为准 另外还有注意IE6、IE7、IE8、IE9与FF、Chrome、Opera之间的区别，这里是兼容浏览器
另外注意标准模式与诡异模式
百度一下吧

追问

恩，这个我能知道。但是我是想问这个页面的错位问题出现在哪里？

追答

以真实浏览器为准，我测试了你代码，在IE和CHROME下面没有错位，不要在意设计模式，推荐你使用文本编辑框学习，比如editplus、notpad等，抛弃DW。

追问

好的，非常感谢。