我有一个使用 div 构建的菜单，每个部分由 2 个 div(标题和内容)组成。单击标题时内容会折叠或展开，但在 IE8 上，展开和折叠部分后，部分 div 之间的空间正在缩小。IE9、Chrome 和 Firefox 可以正确显示所有内容
This是它的样子，第一部分显示正确，下面有空间，但其余部分的空间缩小了
奇怪的是，如果我调整窗口大小，一切看起来都很好 again
This是我正在使用的代码示例，this是 jsfiddle
我希望有人已经解决了同样的问题。谢谢
最佳答案
试试这个代码:
这里有问题的解释:
http://jqueryfordesigners.com/animation-jump-quick-tip/
实际上，将每对标题和内容元素包装在一个包含的 div 中，然后将填充应用到它的底部。在 IE7、IE8、FF 和 Chrome 中测试
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".menu-section-content").hide();
$(".menu-section-title").click(function() {
var theHeight = $(this).height();
$(this).css('height', theHeight);
$(this).next(".menu-section-content").slideToggle(600);
$(this).toggleClass('collapse');
});
});
</script>
<style>
div.menu-section-content
{
border: 1px solid #777;
border-top: none;
padding: 10px;
margin-left: 5px;
background-color: #ffffff;
}
div.menu-section-title
{
font-size: 100%;
border: solid 1px #777777; /*border-radius: 5px 0px 0 0;*/
background-color: #A9C3C4;
color: #fff;
font-weight: 500;
margin-left: 5px;
cursor: pointer;
clear: both;
padding: 5px;
}
.expand
{
background-image: url('http://upload.wikimedia.org/wikipedia/commons/1/1a/Silk_bullet_arrow_up.png');
background-repeat: no-repeat;
background-position: right center;
}
.collapse
{
background-image: url('http://souper-spices.com/wp-content/themes/shopperpress/template_shopperpress/images/langs/arrow.png');
background-repeat: no-repeat;
background-position: right center;
}
.container {
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="menu-section-title expand">
title
</div>
<div class="menu-section-content">
options
</div>
</div>
<div class="container">
<div class="menu-section-title expand">
title
</div>
<div class="menu-section-content">
options
</div>
</div>
<div class="container">
<div class="menu-section-title expand">
title
</div>
<div class="menu-section-content">
options
</div>
</div>
<div class="container">
<div class="menu-section-title expand">
title
</div>
<div class="menu-section-content">
options
</div>
</div>
</body>
</html>
关于jquery - div 之间的 IE8 空间正在缩小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10818744/