IEの垂直メニューのパディング問題

Question

私はcssでメニューを作成しましたが、IEでは問題があります。

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

のFirefox：
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

paddingの代わりにline-heightを使用してください。問題が解決するはずです。