0

I am having problems in IE7 with a HTML/CSS Vertical Menu. In IE7 the Text Changes when I hover and look really jumper as the hover becomes active/unactive.

My HTML is

<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>

And my CSS is:

.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;
}

I'm pretty sure this is due to IE7 as the menu looks OK in Opera and Firefox.

4

1 回答 1

1

我的猜测是它与基于伪类的填充的多个定义有关。由于盒子模型，当您悬停时，它正在更改盒子，移动文本，并可能将光标移动到伪类不再适用的区域。

尝试删除padding规则并重新测试。

于 2013-04-26T21:26:47.043 回答