Question

我认为这个问题最能用图像来解释。这就是我的手风琴的样子：

alt text

当您点击小的加/减图标时，每章下面的幻灯片将展开/折叠。然而，当手风琴中的内容变得太高时，它会从容器中长出来。因此，如果我点击更多加号图标，手风琴将会是这样（不太漂亮）：

alt text

正如您所看到的，容器与手风琴一起不会变得更高，而且看起来不太好。

此问题仅发生在IE7和IE8中。它适用于Firefox和Chrome。

HTML看起来像这样（简化）：

<div id="content">
    <div class="box2 rounded-corners">
        <div class="chapters">
            <h3><a href="/clientarea/view/archived-course/teid/133">Obsah</a></h3>
            <div id="accordion">
                <ul>
                            ... // accordion content - too long
                            ... // accordion content - too long
                            </ul>
                <div class="clear">&nbsp;</div>
        </div>
        <div class="clear">&nbsp;</div>
            </div>
            <div class="training-body">
                ... // content to the right of the accordion
            </div>
        </div>
</div>

CSS，再次siplified：

html, body {
    height: 100%;
    width: 100%;
    overflow: auto;
}
#content {
    background: white url('/images/background_middle.png') left top repeat-x;
    padding: 13px;
    min-height: 40em;
    height: auto !important;
    height: 40em;
}
/* this is the div with rounded corners */
#content .box2  {
    background: white;
    padding: 0 15px 15px;
    border: 1px solid #C5E3F8;
    position: relative;
}
/* left sidebar 98
#content div.chapters {
    float: left;
    width: 224px;
}
/* orange heading "OBSAH" */
#content div.chapters h3 {
    color: #ff6e19;
    text-transform: uppercase;
    font-size: .9em;
    text-align: center;
    padding-bottom: .5em;
    margin-top: 1em;
    margin-bottom: 0;
}
#content div.chapters h3 a {
    color: #ff6e19;
}
/* accordion */
#accordion {
    width: 226px;
    border-top: 1px solid #c5e3f8;
}
#accordion ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
}
/* area to the right of the accordion */
#content div.training-body {
    float: left;
    padding-left: 0px;
    width: 748px;
    line-height: 1.3em;
}

Answer 1

嗯，经过大量研究后发现curvycorners插件导致了问题，这就是你要做的事情：

下载最新版本的插件（也尝试升级你的jQuery，但这只是一个提示）

将圆角CSS更改为以下内容：

.rounded-corners {
  -moz-border-radius:2ex;
  -webkit-border-radius:2ex;
}

，在toggle UL之后，您需要redraw角落refer，使用以下内容：

$this.parent().parent().children('ul').toggle();
curvyCorners.redraw();

Answer 2

编辑抱歉，我的第一个回答不正确

问题在于您设置的最小高度。 IE 7和8支持min-height，但是错误地处理！important，而不是优先于下一个声明。要解决只需删除两个高度线。如果要支持IE6，请添加高度规则，如下所示

...
  min-height: 40em;
}
* html #content {
  height: 40em;
}

手风琴“从容器中”长出来 - 在IE7 / 8中

2 个答案: