Question

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

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

那么让我们看看你们中间有没有疯狂的程序员可以帮助我;）感谢您的帮助。

Answer 1

是section1和section 2浮动？如果是这样的话，在可扩展的div之后添加一个带有clear的div：

Answer 2

解决了！我知道，只要我发布了所有这些信息，它就会跳进我的脑海！

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

感谢帮助过的人。

当在div内部使用jquery show（）时，容器div不会在IE中扩展

2 个答案: