Question

您好我正在使用CSS菜单，它在ff和ie7 / 8看起来很好，但在ie6菜单没有正确定位。它应该坐在右边但由于某种原因它向左移动。我已经为菜单添加了屏幕截图和我的CSS，如果有人能告诉我错误在哪里，我将不胜感激？非常感谢

#menu
    {
        width:425px;
        height:33px;
        float: right;
        margin:133px 51px 0 0;
        padding:0px;
    }
#menu ul
    {
        width:525px;
        height:33px;
        float:left;
        margin:0px;
        padding:0px;
        display:block;
    }
#menu ul li
    {
        width:76px;
        height:33px;
        float:left;
        margin:0 1px 0 0;
        padding:0px;
        display:block;      
    }
#menu ul li a.menu
    {
        width:76px;
        height:26px;
        float:left;
        margin:0px;
        padding:7px 0 0 0;
        font-family:Arial;
        font-size:13px;
        font-weight:bold;
        color:#FFF;
        text-align:center;
        text-decoration:none;
        background-image:url(../images/menu.jpg);
        background-repeat:no-repeat;
    }   
#menu ul li a.menu:hover
    {
        width:76px;
        height:26px;
        float:left;
        margin:0px;
        padding:7px 0 0 0;
        font-family:Arial;
        font-size:13px;
        font-weight:bold;
        color:#FFF;
        text-align:center;
        text-decoration:none;
        background-image: url(../images/menuover.jpg);
        background-repeat:no-repeat;        
    }

截图：

正确的菜单间距：http://i51.tinypic.com/9kytxf.png

错误的菜单间距：http://i54.tinypic.com/fldpow.png

Answer 1

它可能是旧Double Margin Float Bug，当你有一个带有相同方向边距的浮点数时...即左浮动/左边距或右浮动/右边距IE5 / 6已知加倍边距< / p>

等等：

#menu {
        width:425px;
        height:33px;
        float: right;
        margin:133px 51px 0 0;
        padding:0px;
    }

尝试将display:inline;添加到上述规则中，如果是这样的话，这是一个安全的解决方法，因为所有其他浏览器正确地忽略浮动元素上的显示属性

Answer 2

我的猜测是你的尺寸没有正确加起来，IE的处理方式与其他尺寸不同。请注意，例如，#menu的宽度仅为425px，但其ul的宽度为525px。所以也许FF正在削减溢出，但IE不是。

尝试从除最内层元素（例如#menu ul li a.menu）之外的所有元素中删除宽度，然后自动调整其余元素的宽度。或者至少从删除/修复#menu的宽度开始。

Answer 3

确保使用CSS在HTML文件的开头有一个正确的doctype。 IE6的怪癖模式太可怕了！例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

请注意，正确的（非html5）doctype将有一个指向dtd的URL。如果您的doctype不正确，请修复它，看看是否有帮助。

ie6 css显示不正确

3 个答案: