2

我已经尝试解决这个问题超过一天了，所以任何帮助将不胜感激。我有一个由 ul/li 组成的 Suckerfish 菜单。我正在尝试在我的菜单中添加一些自上而下的滚动指示器。在我的示例中，我有一个蓝色和绿色的指示器，它们现在只是放在菜单中。这些指标只是 UL 内部的另一个 LI，但风格不同。我已经将它们绝对定位在一个固定的顶部。如果您使用 firefox 查看示例并将鼠标悬停在 Blah Reports 上，您可以看到 2 个指标出现。

http://inthemind.com/test/test.html

如果您在 IE7 中打开它并将鼠标悬停在 Blah Reports 上，它们不会出现。但是，如果您在子菜单展开时将鼠标悬停在其中一个子项目（即合规性）上，则指示器会变得可见。一旦子菜单展开，我不知道发生了什么变化以使指示器显示出来。

如果有人能给我一个提示或提示，让我知道它在 IE 中工作时缺少什么，我将不胜感激。

谢谢，劳尔

ps）我必须使用怪癖模式

更新 所以我把它缩小到IE不会解析绝对定位元素的事实，因为ul是隐藏的，当ul变得可见时，IE不会返回并重新计算位置。如果我等到ul可见，那么我将类重新分配给指示器以重置元素的位置，这似乎使它们显示出来。这并不理想，因为现在我的指标不会随着菜单淡入，而是在事后显示。

还有其他提示吗？

4

3 回答 3

0

看看这个它对我有用。虽然不是 100% 确定它是否是您正在寻找的，但可能对某人有用

于 2010-08-10T15:06:43.943 回答
0

要记住几件事：

您所有的 z 索引元素都应该是position: relative，否则position: absoluteIE 6 和 7 将无法正确处理它们。

此外，IE 6 和 7 将 z-index 视为相对于其兄弟元素，而不是所有元素。例如 =>

<div style="z-index: 2;">
  <div id="d1" style="z-index: 1000"></div>
</div>
<div style="z-index: 1;">
  <div id="d2" style="z-index: 2000"></div>
</div>

在此示例中，#d1 将显示为 #d2。

您还可以调整 DOM 中兄弟元素的顺序以获得所需的 z 顺序。

如果您使用的是 jQuery，这里有一个潜在的快速修复 =>
http://thepalmcivet.com/post/121898767/fixing-internet-explorers-z-index-bug-with-jquery

于 2010-08-10T18:47:03.857 回答
0

好吧，我为你们中那些感兴趣的人想通了。在 IE 中最终发生的情况是，如果父元素从 display: none 更改为 display: block 绝对定位的子元素永远不会在布局引擎中得到处理，因此它们永远不会设置初始偏移量。

所以你要做的就是将父级设置为 display: 块，重置指示器 LI 上的类，以便布局引擎启动，然后你必须通过调用 offsetTop 强制布局引擎布局所有内容。一旦元素被定位，我们就可以将父元素设置回显示：无。

强制布局引擎刷新的原因是 IE 将合并所有样式更改，直到 javascript 完成，这意味着永远不会重新计算偏移量。

这是解决问题的代码：

if ($.browser.msie && $.browser.version <= 7) {
    var il = $ul.data('indicatorLayedOut');
    if (il == null) { // We only have to do the layout once
        var $ind = $ul.find('>.indicator');
        $ul.css('visibility', 'hidden').css('display', 'block');

        // Force IE to re-style the indicators. If we omit this then the layout engine
        // will not update the position and cause the indicators to not show up
        $ind.addClass("indicator");

        // We then have to iterate through
        // and pull the offset so we can
        // force a dom update
        $ind.each(function() {
            var oy = this.offsetTop, ox = this.offsetLeft;
            //console.log("X: " + ox + ", Y: " + oy);
        });
        $ul.css('display', 'none').css('visibility', 'visible');

        $ul.data('indicatorLayedOut', true);
    }
}
于 2010-08-10T20:59:57.987 回答