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

我在菜单上遇到了同样的问题，发现删除了＆＃34; display：block;＆＃34;用IE解决了这个问题。

导航链接出现错误的边距，直到在IE中悬停

1 个答案: