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

Question

我似乎遇到了 IE7 中的一个新错误，因为我似乎无法在其他任何地方找到对它的任何引用。最好使用屏幕截图来解释，所以这里有几个链接(注意，它不需要在 IE6 中工作，所以我什至不想知道它在 IE6 下的样子!):

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

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

这是该菜单 block 的 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”