奇怪的Internet Explorer 7错误;没有正确计算链接上的填充

Question

似乎我在IE7中遇到了一个新的bug，因为我似乎无法在其他地方找到任何引用它。最好用截图来解释，所以这里有几个链接（作为一个注释，它不是在IE6中工作的要求，所以我甚至不想知道它在它下面的样子！）：< / p>

应如何显示（使用Safari 4）： http://dl-client.getdropbox.com/u/45961/safari4.png

IE7如何显示它： http://dl-client.getdropbox.com/u/45961/ie7.png

这是菜单块的CSS：

    #mm #leftNav .navigation {
    width: 100%;
    margin-bottom: 0;
    float: left;
}

#mm #leftNav li {
    list-style: none;
    display: inline;
    margin: 0;
}

#mm #leftNav .navigation li ul {
    display: none;
}

#mm #leftNav .navigation li a {
    text-decoration: none;
    color: #ffffff;
    font-size: 11pt;
    padding-left: 20px;
}

#mm #leftNav .navigation li {
    cursor: pointer;
    margin-right: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 10px;
    padding-bottom: 8px;
    overflow: visible;
}

.menu_item {
    background: #419185; 
}

.menu_item:hover {
    background: #48a093;
}

.currentcat {
    background-color: #4aa8a6;
}

.currentcat:hover {
    background: #4aa8a6;
}

这是HTML：

<div id="mm">
    <div id="leftNav">
        <ul class="navigation">
            <li class="menu_item">
                <a class="icon icon-base">Base</a>
            </li>
            <li class="menu_item">
                <a class="icon icon-devices">Devices</a>
            </li>
            <li class="menu_item">
                <a class="icon icon-management">Management</a>
            </li>
            <li class="menu_item">
                <a class="icon icon-iptools">IP Tools</a>
            </li>
            <li class="menu_item">
                <a class="icon icon-config">Configuration</a>
            </li>
            <li class="menu_item">
                <a class="icon icon-admin">Administration</a>
            </li>
        </ul>
        <div id="subnav"></div>
    </div>
</div>

有什么想法吗？

Answer 1

内联元素不支持顶部和底部填充（某些浏览器会呈现它，其他浏览器则不会）

这是一篇关于这个问题的好文章：

http://www.maxdesign.com.au/presentation/inline/

如果你真的需要正确的填充，你应该将菜单项更改为“display：block”和“float：left”

Answer 2

赫赫，激活打败了我。 实际上，将边距/填充移动到A元素，有点像：

mm #leftNav .navigation li a {

text-decoration: none;
color: #ffffff;
font-size: 11pt;
display:block;
float:left;
background: #419185;
margin-right: 4px;
padding-left: 20px;
padding-right: 8px;
padding-top: 10px;
padding-bottom: 8px;

}

mm #leftNav .navigation li {

cursor: pointer;

}

.menu_item {

}