导航链接以错误的边距显示，直到在 IE 中悬停

Question

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

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

在 IE 中，我的顶部导航链接 (2) 看起来太高了大约 20 像素，直到您将鼠标悬停在它们上方，然后它们就会跳到位。

导航 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 解决了这个问题。