垂直CSS/HTML菜单-文本跳转在IE7

Question

我在IE7中有HTML/CSS垂直菜单的问题。在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规则并重新测试。