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规则并重新测试。

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

1 个答案: