在其中的 div 上使用 jquery show() 时，容器 div 未在 IE 中扩展答案

【问题标题】：Container div not expanding in IE when using jquery show() on div inside it在其中的 div 上使用 jquery show() 时，容器 div 未在 IE 中扩展
【发布时间】：2010-01-15 22:12:23
【问题描述】：

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

在 Chrome 和 FF 中一切正常，但在 IE 中，包含其他部分的主 div 不会在其中打开一个部分时扩展以适应。

我尝试过更改各种属性，例如设置容器 div 的高度，

<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>

所以当我在 #section1 或 #section2 上调用 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和一个扩展）

#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;
}

所以让我们看看你们那里有没有疯狂的程序员可以帮助我；）谢谢你的帮助。

【问题讨论】：

form、section1 和 section2 还有哪些其他样式？另外，考虑在表单中使用<fieldset> 而不是<div>。

标签： jquery internet-explorer html show-hide

【解决方案1】：

第 1 部分和第 2 部分是否浮动？如果是这样，在可扩展的 div 之后添加一个带有 clear:both 的 div ..

【讨论】：

【解决方案2】：

解决了！我知道一旦我发布了所有这些信息，它就会跳入我的脑海！

问题是我想扩展的容器 div 的角使用 curvycorners 弯曲 - 这意味着我猜 IE 无法重新渲染它，所以我只是取消了舍入并在下面添加了另一个 div角落。

感谢提供帮助的人。

【讨论】：