在IE浏览器中显示不正确的CSS-li元素

在IE浏览器（8）中显示li元素时出现问题，它看起来完全是我想要的FF。在IE浏览器中显示不正确的CSS-li元素

IE在元素的底部放置一个4px的边距。这是代码。我可以通过向元素添加-4px的边距来删除边距，但是随后它会将其缩小到FF中。

所以基本上IE让我变胖。

#navigation ul { 
    width: 176px; 
    margin: 0px 1px 2px 0px; 
    padding: 0px 0px 0px 0px; 
    list-style: none; 
    -webkit-box-shadow: inset 0px 0px 4px 4px #000001; 
    -moz-box-shadow: inset 0px 0px 4px 4px #000001; 
    box-shadow: inset 0px 0px 4px 4px #000001; 
    border: 1px solid white; 
    -webkit-border-radius: 0px 0px 10px 10px; 
    -moz-border-radius: 0px 0px 10px 10px; 
    border-radius: 0px 0px 10px 10px; 
    float: left; 
} 
#navigation li { 
    height: 30px; 
} 
#navigation li:hover { 
    background: none; 
    -webkit-box-shadow: inset 0px 0px 4px #000; 
    -moz-box-shadow: inset 0px 0px 4px #000; 
    box-shadow: inset 0px 0px 4px #000; 
} 
#navigation li:last-child { 
    -webkit-border-radius: 0px 0px 10px 10px; 
    -moz-border-radius: 0px 0px 10px 10px; 
    border-radius: 0px 0px 10px 10px; 
} 
#navigation ul li a { 
    display: block; 
    padding: 8px 8px 8px 8px; 
    font: bold 12px Helvetica; 
    color: #444; 
    text-decoration: none; 
    border-bottom: 1px solid #999; 
    border-top: 1px solid #FFF; 
} 
#navigation ul li a:hover { 
color: blue; 
} 
#navigation ul li:first-child a { 
    border-top: none; 
} 
#navigation ul li:last-child a { 
    border-bottom: none; 
}

代码为li元素的背景（其中许多是 - 它就像图片的拼图）：

#c1l1 { background: url(img/new-1-0-0-0-01-02.png);} 
#c1l2 { background: url(img/new-1-0-0-0-01-03.png);}

有什么建议？

来源

2012-04-18 user1100099

嘿，我认为你定义li，一个显示器：linline-block; – 2012-04-18 08:05:05

您是否尝试过指定保证金：0;？ – 2012-04-18 08:06:52

这似乎是一个dup http://stackoverflow.com/questions/4338892/margin-after-list-items-in-ie或http://stackoverflow.com/questions/5498354/css-gap-between-list- items-in-ie7 – fcalderan 2012-04-18 08:09:32

尝试在<li>元素上设置display: inline;。当然，对于IE来说（使用条件注释）。

来源

2012-04-18 08:05:41

尝试添加

//margin: -4px;

应该我觉得你的浏览器样式表和自己的风格的受害者IE

来源

2012-04-18 08:07:18

感谢您的建议，我添加了 – user1100099 2012-04-18 08:20:32

有没有必要使用这样的重型结构。 ''''是平等的。它将被除IE以外的所有浏览器忽略。 – 2012-04-18 08:29:52

的所有版本。我建议将ul和li元素上的填充和边距重置为0.此复位应在应用其他样式之前完成，并且应该应用于所有浏览器以获得一致的布局。

来源

2012-04-18 08:07:50

我有身体{margin：0; padding：0;}。这是你正在接受的重置吗？我是新来的CSS和HTML所以请原谅，如果这是明显的东西。 – user1100099 2012-04-18 08:10:15

这些样式重置仅适用于身体元素。您需要执行以下操作 - – 2012-04-18 08:40:19

尝试其中之一：

float: left列表项目（随后还应用clear: left或者你会看到他们并排延伸）
设置line-height: 30px列出项

来源

2012-04-18 08:13:57 fcalderan

在IE浏览器中显示不正确的CSS-li元素

回答

相关问题