IE中的垂直菜单填充问题

Question

我用css创建了菜单，但在IE中显示有问题。

Internet Explorer：
IE http://s2.picofile.com/file/7117901177/IE.png

火狐：
FF http://s2.picofile.com/file/7117901391/FF.png

CSS：

<style>
.invertedshiftdown{
    padding: 0;
    width: 100%;
    border-top: 5px solid #D10000;
    background: transparent;
    voice-family: "\"}\"";
    voice-family: inherit;
}
.invertedshiftdown ul{
    float:right;
    margin:0;
    padding: 0;
    list-style: none;
}
.invertedshiftdown li{
    display: inline;
    margin: 0 2px 0 0;
    padding: 0;
    text-transform:uppercase;
}
.invertedshiftdown a{
    float: left;
    display: block;font-size:11px;
    color: black;
    text-decoration: none;
    margin: 0 1px 0 0; 
    padding: 5px 10px 9px 10px; 
    background-color: white; 
}
.invertedshiftdown a:hover{
    background-color: #D10000; 
    padding-top: 9px;
    padding-bottom: 5px;
    color: white;
}
.invertedshiftdown .current a{
    background-color: #FF7400;
    padding-top: 9px; 
    padding-bottom: 5px;
    color: white;
}
</style>

HTML：

<div style="width:600px;height:30px;float:right;">
    <div class="invertedshiftdown">
        <ul>
            <li ><a href="http://www.dynamicdrive.com" title="Home">Home</a></li>
            <li><a href="http://www.dynamicdrive.com/new.htm" title="New">New</a></li>
            <li ><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">Revised</a></li>
            <li><a href="http://tools.dynamicdrive.com" title="Tools">Tools</a></li>
            <li><a href="http://www.dynamicdrive.com/style/" title="CSS">CSS</a></li>
            <li ><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">Forums</a></li>
        l>
    </div>
</div>

我该如何解决这个问题？

Answer 1

使用css line-height代替padding，它可以解决您的问题。