css - 在 IE 中悬停之前，导航链接显示的边距错误

Question

我非常即将启动我的第一个 Magento 元素，而最后一站只是一个接一个的 CSS 障碍……主要是 IE。

最后一个在修复其他 5 个问题后弹出，直到现在才成为问题。

在 IE 中，我的顶部导航链接 (2) 显示大约 20px 太高，直到您将鼠标悬停在它们上面然后它们跳到位。

导航 CSS:

.nav-container { background:#ffffff url(../images/bkg_nav0.jpg) 50% 0 repeat-y; }
#nav { width:918px; margin:0 auto; padding:0 16px; font-size:13px; }

#nav li { position:relative; text-align:left; }
#nav li.over { z-index:998; }

#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none;}
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav ul li.parent a { background:url(../images/bkg_nav2.gif) 100% 100% no-repeat; }
#nav ul li.parent li a { background-image:none; }

/* 0 级 */

#nav li { float:left; }
#nav li.active a { color:#8751b0; }
#nav a { float:left; padding:5px 12px 6px 8px; color:#000000; font-weight:bold; display: block;}
#nav li.over a,
#nav a:hover { color:#8751b0; display: block;}

/* 第一级 */

#nav ul li,
#nav ul li.active { float:none; margin:0; padding-bottom:1px; background:#ecf3f6 url(../images/bkg_nav1.gif) 0 100% repeat-x; }
#nav ul li.last { background:#ecf3f6; padding-bottom:0; }

#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul li a { font-weight:normal !important; }

如您所见，没有 :hover 属性的边距会覆盖原始状态。我就是想不通这个。

我已经尝试过 Firebug，但我无法将它与 IE 问题联系起来。它在 FF 中呈现良好...而 IE 的“开发人员工具”无法与 Firebug 相提并论...

请提供任何帮助，我们将不胜感激!

Answer 1

我对菜单有同样的问题，发现删除“display: block;”修复了 IE 的这个问题。