html - 其容器中的 Accordion "growing out"- 在 IE7/8 中

Question

我认为这个问题最好用图像来解释。这是我的 Accordion 的样子:

当您单击小加号/减号图标时，每章下的幻灯片将展开/折叠。然而，当 Accordion 中的内容物长得太高时，它就会从容器中长出来。因此，如果我单击更多加号图标， Accordion 将如下所示(不漂亮):

如您所见，容器并没有随着 Accordion 一起变高，而且看起来不太好。

这个问题只出现在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，再次简化:

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 插件导致了问题，这是你必须做的:

1. 下载最新版本的插件(也尝试升级您的 jQuery，但这只是一个提示)

2. 将圆 Angular CSS 更改为以下内容:

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

3. 在您的 JS 中，在 切换UL 之后，您需要重绘 Angular ，refer ，使用以下内容:

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