垂直的CSS/HTML菜單 - 在IE7中跳轉文本

Question

我在使用HTML/CSS垂直菜單的IE7中遇到問題。在IE7中，當我懸停時文本發生變化，並且在懸停變爲活動/無效時看起來非常跳躍。

我的HTML是

<table width="100%" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td align="center"><h5>&nbsp;</h5></td> 
    </tr> 
    <tr> 
    <td height="137" align="center"><blockquote> 
     <div id="vmenu"> 
     <ul> 
      <li> 
      <h5 class="style5">Intermittent Fasting Diet Articles - Navigation</h5> 
      </li> 
      <li><a href="caloriesinblackberries.html">Calories in Blackberries</a></li> 
     </ul> 
     </div> 
    </blockquote></td> 
    </tr> 
</table> 

我的CSS是：

.offscreen { 
position: absolute; 
top: -30em; 
left: -300em; 
} 
div#vmenu { 
margin: 0; 
padding: .25em 0em .25em 0em; 
border: solid 0px #002277; 
background: #ffffff; 
width: 13.5em; 
} 
div#vmenu ul { 
margin: 0; 
padding: 0; 
list-style: none; 
} 
div#vmenu ul li { 
margin: 0; 
padding: 0; 
list-style: none; 
} 
div#vmenu ul a:link { 
margin: 0; 
padding: .2em 0em .2em .4em; 
text-decoration: none; 
font-weight: bold; 
font-size: medium; 
background-color: #FFFFFF; 
color: #000033; 
display: block; 
} 
div#vmenu ul a:active { 
margin: 0; 
padding: .25em .5em .25em .5em; 
text-decoration: none; 
font-weight: bold; 
font-size: medium; 
background: #ffffff; 
color: #ffffff; 
display: block; 
} 
div#vmenu ul a:visited { 
margin: 0; 
padding: .25em .5em .25em .5em; 
text-decoration: none; 
font-weight: bold; 
font-size: medium; 
background: #ffffff; 
color: #666666; 
display: block; 
} 
div#vmenu ul li a:hover { 
margin: 0; 
padding: .2em 0em .2em .4em; 
text-decoration: none; 
font-weight: bold; 
font-size: medium; 
background-color: #ffffff; 
color: #ff6600; 
display: block; 
} 

我敢肯定，這是由於IE7的菜單看起來Opera和Firefox確定。

Answer 1

我的猜測是它與基於僞類的填充的多個定義有關。由於盒子模型的原因，當你懸停時，它正在改變盒子，移動文本，並可能將光標移動到僞類不再適用的區域。

嘗試刪除padding規則並重新測試。