下面是测试代码:<style>
*{margin:0px}
#menu{width:950px; margin:0px auto;}
#menu ul {list-style:none;margin:0px; width:100%}
#menu ul li {float:left;margin:0px; text-align: center;}
#menu ul .leftimg {background:url(images/an_01.gif);width:2px;height:38px;}
#menu ul .rightimg {background:url(images/an_03.gif);width:2px;height:38px;}
#menu ul .li {background:url(images/an_04.gif);width:2px;height:38px;}
#menu ul li a{width:77px;float:left;margin:0px;background-image: url(images/an_02.gif);font-size: 14px;color: #FFFFFF;text-decoration: none;line-height: 38px;height: 38px;font-weight: bold;}
#menu ul li a:hover{float:left; margin:0px;10px;background-image: url(images/an_05.gif);font-size: 14px;color: #FFFFFF;text-decoration: none;line-height: 38px;height: 38px;font-weight: bold;}
</style>
<div id=menu><ul><li class=leftimg></li><li><a href="index.html">index</a></li><li class=li></li><li><a href="List/8_1.html">001</a></li><li class=li></li><li><a href="List/9_1.html">002</a></li><li class=li></li><li><a href="List/10_1.html">003</a></li><li class=li></li><li><a href="List/11_1.html">004</a></li><li class=rightimg></li>
</ul>
</div>这是测试预览效果:
http://www.zjjotc.cn/divcss.html
现在这个测试地址在IE中可以正常显示
为什么放到火狐中menu层就向右移动了差不多20的像素呢,谢谢解答!

解决方案 »

  1.   

    我的意思能不能按WEB标准来搞到正常效果^_^
      

  2.   

    那我把标准加上去
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>test</title>
    </head>
    <body>
    之后效果还是一样,有解决方法吗^_^
      

  3.   

    firefox是标准浏览器,应该是你的布局代码写的有问题,但IE不是标准的原因解释成正确显示了,
      

  4.   

    #menu ul {list-style:none;margin:0px; width:100%;padding-left:0px;}
      

  5.   

    没有加padding-left:0px;代码前的效果:
    http://www.zjjotc.cn/divcss.html加padding-left:0px;代码后的效果:
    http://www.zjjotc.cn/divcss1.html两种效果都要在火狐中才可以看到区别^_^
      

  6.   

    这是由于滚动条的原因, IE 6.0存在的bug,你到ie7.0 下就不会了