IE7中的主动导航“跳跃”答案

【问题标题】：Active navigation "jumping" in IE7IE7中的主动导航“跳跃”
【发布时间】：2011-10-09 20:15:26
【问题描述】：

可以在here找到我正在开发的网站。

仅在 IE7 中：

只要用户将鼠标悬停在非活动选项卡上，活动导航选项卡就会“跳跃”。

截图：

谁能解释一下如何解决这个问题？

【问题讨论】：

标签： css cross-browser navigation internet-explorer-7

【解决方案1】：

我所看到的只是 /css/app.min.css 文件中的“活动”类存在问题，或者某处出现了一些行为不正确的 javascript。你可能会说，“呃！”

我无法用我手头的工具来判断。另一方面，当我从相关链接中删除“活动”类时，我能够看到不会发生“跳跃”。但是，该链接看起来就像导航中的其余项目一样，并且您希望它看起来...呃...活动。

如果这是脚本中某处的问题，并且您不知道是什么问题，那么也许可以更改类的名称并找到将链接设置为活动的逻辑以反映新活动的名称类。

我将首先注释掉与您的“活动”类相关的现有样式，然后通过重新引入一些先前的样式并在每次小的更改时刷新页面，逐渐建立您希望它的显示方式，直到您找到问题。

我认为这些都是需要更改的有问题的样式。：

#tabnav ul#dash-nav li.active a{
    margin-left:-8px;
    margin-right:-6px;
    margin-top:-6px;
    position:relative;
    background-color:transparent;
}

#tabnav ul#dash-nav li.active a span{
    background:url("/images/bg-nav-hover-l.png") no-repeat scroll 0 0 transparent;
    color:#fff;
    padding:7px 1px 1px 18px;
}

#tabnav ul#dash-nav li.active a .arrow{
    display:block;
}

#tabnav ul#dash-nav li.active a:hover .arrow{
    display:block;
}

#tabnav ul#dash-nav li.active a img,#tabnav ul#dash-nav li a:hover img{
    margin-top:-21px;
}

#tabnav ul#dash-nav li.active a em{
    background:url("/images/bg-nav-hover-r.png") no-repeat scroll 0 0 transparent;
    height:34px;
    width:17px;
}

【讨论】：

【解决方案2】：

将 IE7 的修复放在条件注释中怎么样？

【讨论】：