在IE中对DIV使用jquery show()时容器DIV未展开

我一直在构建一个包含可扩展部分的表单。使用jquery的hide()和show()方法切换div。

在chrome和ff中都可以正常工作,但在ie中,包含其他分区的主分区在打开一个分区时不会展开以适应它。

我尝试过改变各种属性,比如设置容器的高度。

<div id='form'>

    <form id='form2'>
        // some form fields
        <div id="section1" style="display: none">
          // more fields
        </div>
        <div id="section2" style="display: none">
          // more fields
        </div>
    </form>

</div>

因此,当我在第1节或第2节上调用show()时,form并不是在膨胀,只是保持相同的高度,而实际正在膨胀和关闭的div似乎工作正常,它们后面没有漂亮的容器。

更新 感谢大家的帮助-我现在提供更多信息。

请点击此处查看相关页面: Form Page 按“提交”(我已经用一些测试数据填写了表格)。然后,您将看到第二个表单页面,即有问题的页面。

两个部分中的绿色图标控制DIV,这里是第一个部分的jquery脚本,因为它们都是相同的:

var toggleMinus = 'wp-content/uploads/2010/01/delete.png';
var togglePlus = 'wp-content/uploads/2010/01/add.png';

$("#openelec").click(function() // when button clicked
{
    var toggleSrc = $(this).attr('src'); // check which icon is shown
    if(toggleSrc == toggleMinus) // if it is a minus
    {
        $(this).attr('src', togglePlus); // change to plus
        $(".elecsite").slideUp(1500); // close the div
    }
    else
    {
        $(this).attr('src', toggleMinus); // change to minus
        $(".elecsite").slideDown(1500); // open the div 
    };
});

在Chrome或FF中查看,您将看到我希望它如何表现-在IE中,它只是不玩球。

这也是CSS:(只有主DIV和扩展的DIV)

#form{
width: 770px;
background: #DDEEEE;
padding: 10px;
border-top: 1px solid #c60;
height: auto;
text-align: left;

-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
.elecsite{
width: 760px;
height: auto;
background: #EFE0E0;
padding: 5px;
border-bottom: 1px solid #DF7401;
float: left;
}

所以让我们看看你们这些疯狂的程序员是否能帮助我;)谢谢你们的帮助。