0

使用：jQuery 1.7.1

我在 IE8 中看到一个问题，我有一个容器 div，当使用 hide() 和 show() 在其中隐藏/显示子元素 (UL) 时，无法正确计算其高度。

这个容器 div 是一个封装模块内容的模块体。每当模块中的某些内容需要调整模块的高度/宽度时，我们的模块都需要调用一个刷新方法，这是因为它们需要一个固定的高度才能正确渲染它。它通过抓取容器 div 的高度来做到这一点，但是当我在 IE 中展开或折叠内部部分时，容器 div 不会重新计算其高度。

我发现如果我用 .addClass("display-none") / .removeClass("display-none") 替换所有 hide() show() （其中 .display-none{display:none;}）它修复这个问题。但是，我希望有一个 css 解决方案，我仍然可以使用显示和隐藏、一些我不知道的规则或 IE 问题/hack。

我想问的问题是为什么？

这里有一些更多的细节，

  1. 我隐藏和显示的项目是来自内部构建的树小部件的节点组，该小部件由嵌套的无序列表组成，也就是隐藏和显示正在应用于<ul>s。
  2. 我在树节点中隐藏和显示元素有另一个动作，这个动作确实会导致容器 div 正确地重新计算其高度。
  3. 包装树的其他 div 确实重新计算正确，由于某种原因它停止在容器 div 处冒泡。

如果代码示例或 html 示例有帮助，我也可以提供，但我真的很想看看是否有人碰巧对我遇到的问题有一个更一般的概念。

这是容器的样式

.module > div > div > * {
    word-spacing: normal;
}

.module-content-data {
    max-width: 962px;
    padding: 10px 10px 0;
}

* {
    margin: 0;
}

.module {
    word-spacing: -1em;
}

Inherited fromdiv.main
.main {
    word-spacing: -1em;
}

Inherited frombody
body {
    color: #333333;
    font-family: Arial,Calibri,Verdana,Helvetica,Sans-Serif;
    font-size: 11px;
}
4

1 回答 1

0

我最终确实找到了解决方案，但仍然没有找到原因。显然在 IE8 中 $.hide() 和 $.show 在某些情况下没有正确设置计算高度。但是，我修改了我的方法，改为使用 addClass("display-none") 调用并正确计算高度。我希望这有助于任何其他有类似问题的人。

更新：在具有相同问题的另一个页面上，上面列出的“修复”无效。所以我还是不知道。如果我发现更多，会更新。

于 2012-08-02T21:35:01.800 回答