IE8 隐藏内容后包装器的高度仍然相同

Question

前言

我再次遇到了那些奇怪的 Internet Explorer 问题之一，我遇到了麻烦。 更准确地说，是IE8。我也在IE7中测试过，那里没有问题，所以IE8有问题..

注意，有一个 JSFiddle 示例位于本文底部，重现了我的问题。

---

快速解释

我已经得到了这个ul，它用于在以下情况下扩展/收缩内容：点击span.content_head。默认情况下，首先显示内容。

<div id="spreadsheet_overview">
    <ul class="overview_list">
        <li>
            <div class="content_head">
                <div class="indicator"></div>
                Recipe calculation
                <div class="summation">
                    <span class="title">1 tablet cost:</span>
                    <span class="value">0.09360828</span>
                </div>
            </div>
            <div class="container">Lots of content</div>
        </li>
    </ul>
</div>

$("div.content_head").click(function(e){
    $(this).next(".container").toggle();
    $("div.indicator",this).toggleClass("contracted");
});

---

问题

当我点击合同时出现问题。让我首先向您展示它在 Firefox 中的外观及其工作原理。

文档由

• 正文组成——略深灰色的
• 包装纸、亮灰色的
• 分隔栏、深灰色的
• 更多分隔线、白色。

如您所见，文档在“配方计算”后结束，文档的高度已调整并删除了垂直滚动条。
包装纸的高度也已调整。

然而，在 Internet Explorer 8 中，当我执行相同的操作时，包装器会保持其高度，就好像内容仍然显示一样。为什么IE不调整高度？

我已经检查过，高度与隐藏内容之前完全相同。

如果这是 CSS 问题（我确信是这样），那可能是什么？

---

JSFiddle

这是一个 JSFiddle 可以重现我的具体问题。我尝试将 CSS 减少到仅包含本期中的元素。
这可能是我用 CSS/HTML 完成的事情。
希望你们中的一个人能发现它，因为我肯定不能...

单击“配方计算”将隐藏内容，您会注意到高度仍然相同。在IE8中。

感谢您的帮助！

w3d编辑

指出，当在开发人员工具中切换 height: auto 属性时，将调整包装器高度。经过进一步调查，当我调整窗口大小时，它会做同样的事情。

Answer 1

更改：

.fix{display: inline-block;}

至：

.fix{display: block;}

IE 不知道 inline-block 是什么。