1

这是 IE8-9 中带有负载指示器的奇怪行为示例（位于选项卡上）

http://afternoon-river-5822.herokuapp.com/

有两个链接：第一个打开一个“快速”页面，另一个 - 一个“慢”页面，好像上面有一些计算。它在大约 20 秒内打开。

这些链接有两个图像。第一个是默认状态，第二个是突出显示。

问题是：如果单击 IE8-9 中的“慢”链接并将鼠标从链接上移开，则 IE 将停止进度 - 选项卡上的微调器将消失。大约 20 秒后，将显示一个新页面。但是，如果在点击链接后没有触摸鼠标（图像不会更改为默认值），那么指示器将正常工作 - 将旋转直到新页面完全加载。

我怎样才能避免这种行为？

CSS：

.b-mainmenu li {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  min-width: 58px;
  height: 100px;
  margin-right: -6px;
}

.b-mainmenu li a {
  display: block;
  font: bold 11px "Lucida Grande",tahoma,arial,sans-serif;
  color: #5d5e5b;
  min-width: 58px;
  padding-top: 36px;
  background-position: 50% 3px;
  background-repeat: no-repeat;
  margin-right: 3px;
  margin-left: 3px;
}

.b-mainmenu li a:hover, 
.b-mainmenu li.active a {
  text-decoration: none;
  color: #fff;
}

a {
  display: block; width: 341px; height: 97px;
}
.b-mainmenu-fast {
  background-image: url(/assets/menu-home.png);
}
.b-mainmenu-slow {
  background-image: url(/assets/menu-backup.png);
}
.b-mainmenu-fast:hover {
  background-image: url(/assets/menu-home_aa.png);
}
.b-mainmenu-slow:hover {
  background-image: url(/assets/menu-backup_aa.png);
}

HTML：

<ul class="b-mainmenu">

<li><a class="b-mainmenu-fast" href="page/fast_page">Fast page</a></li>
<li><a class="b-mainmenu-slow" href="page/slow_page">Slow page</a></li>

</ul>
4

1 回答 1

0

也许您可以避免在悬停时更改与 URL 相关的属性？相反，设置background-color和其他属性来实现所需的视觉效果。如果不更改 URL，加载指示器将正常工作。我已经检查过数据 url 是否会产生任何影响 - 不幸的是没有。

您预计加载新页面将花费大量时间，在这种情况下，我建议显示一些进度指示器，而不是太在意选项卡上的内置微调器。当用户单击链接时，您可以更改某些动画 gif 的图像背景。

于 2013-06-07T08:18:46.023 回答