jq的slideToggle（）在ie8里遇到bug：下盒子的margin—top失效，margin-top塌陷解决方法

实现效果，点击box.head，用jq实现slideToggle上下滑动box.body，我的代码如下：

 <!-- single class chapter partion start -->

                <div class="class_chapter">
                    <div class="chapter_title blue_cata">
                        <div class="chapter_title_left">
                            <p>第1部分</p>
                            <h4>什么叫交互动效？</h4>
                            <p>2016.03.01—2016.09.01</p>
                        </div>
                        <p class="chapter_title_center">共 <i>5</i> 节| 已学习 <i>1 </i>节</p>
                        <p class="chapter_title_right">
                            <span class="zuoye">
                                <i class="zuoye_num">1</i><br>
                                <i >作业</i>
                            </span>
                            <span class="arrow_updown"><em></em></span>
                        </p>
                    </div>
                    <div class="chapter_content clearfix">
                        <p>
                            <a class="chapter_content_title" href="#"><b>1</b>什么叫交互动效</a>
                            <span class="chapter_content_right">
                                <a class="start_learn" href="#">开始学习</a>
                                <a class="no_practise" href="javascript:;">无作业</a>
                            </span>
                        </p>
                        <p>
                            <a class="chapter_content_title" href="#"><b>2</b>交互动效的要素</a>
                            <span class="chapter_content_right">
                                <a class="start_learn" href="#">开始学习</a>
                                <a class="start_learn" href="#">有作业</a>
                            </span>
                        </p>
                        <p>
                            <a class="chapter_content_title" href="#"><b>3</b>交互动效的几个重要构成</a>
                            <span class="chapter_content_right">
                                <a class="start_learn" href="#">开始学习</a>
                                <a class="no_practise" href="javascript:;">无作业</a>
                            </span>
                        </p>
                        <p>
                            <a class="chapter_content_title" href="#"><b>4</b>交互软件介绍</a>
                            <span class="chapter_content_right">
                                <a class="start_learn" href="#">开始学习</a>
                                <a class="no_practise" href="javascript:;">无作业</a>
                            </span>
                        </p>
                        <p>
                            <a class="chapter_content_title" href="#"><b>5</b>交互动效的要素</a>
                            <span class="chapter_content_right">
                                <a class="start_learn" href="#">开始学习</a>
                                <a class="start_learn" href="#">有作业</a>
                            </span>
                        </p>
                    </div>
                </div>

                <!-- single class chapter partion end -->

css如下：

/*single class chapter's css*/	
.class_chapter{ width: 940px; margin:0 auto; margin-top: 20px;}
	.chapter_title{ width: 919px; height: 98px; border:1px solid #d2d6de; border-left: 2px solid #3c8dbc; padding-left: 18px;}
	.chapter_title:hover,.chapter_title.on{ background-color: #fafafa;}
	.chapter_title_left{ height: 58px; float: left; width: 250px; padding: 20px 0;}
	.chapter_title_left h4{ line-height: 36px;}
	.chapter_title_center{  height: 98px; line-height: 98px; float: left; width: 300px; }
	.chapter_title_center i{ color:#dd4b39; padding: 2px;}
	.zuoye{ float:left;width: 98px; height: 59px;  color: #f39c12; text-align: center; padding-top: 29px;}
	.zuoye i{ color:#f39c12;}
	.zuoye .zuoye_num{ font-size: 24px;}
	.chapter_title_right{ height: 98px; width: 200px; float: right;}
	.arrow_updown{ float:right;width: 100px; height: 88px; border-left:1px solid #d2d6de; cursor: pointer; font-size: 0;line-height: 98px; text-align: center; padding-top: 10px;}
	.arrow_updown em{ display: inline-block; width: 24px; height: 15px; background-position: -76px -210px; }

js如下：

//我的课程三级页，点击章节title右侧下拉箭头，展开、收起小节信息
	$("#class_catalog").find(".arrow_updown").click(function(){
		$(this).parent().parent().next(".chapter_content").slideToggle(speed);
		$(".arrow_updown").parent().parent().removeClass("on");
		$(this).parent().parent().addClass("on");
		
		if(!$(this).attr("_down")){
			$(this).children("em").css('backgroundPosition','-52px -210px');
			$(this).attr("_down",1);
		} else {
			$(this).removeAttr("_down");	
			$(this).parent().parent().removeClass("on");
			$(this).children("em").css('backgroundPosition','-76px -210px');
		}
	
	});

问题来了：在其谷歌、火狐，ie9，甚至ie6上面都效果正常，在ie8上，点击按钮展开再收回的时候，下面的class_chapter盒子的margin-top就不显示了，问其他的中文博客文章都说的ie8的bug，外国博客文章有说ie8的，也有不确定是否jq的小错误（glicth），我感觉有点像浏览器的margin-top塌陷问题，解决办法有二：

1、给有margin-top值的盒子加overflow：hidden；

2、将margin-top值改成不可见的边框；

3、slideToggle改成show（）和hide（），或者toggle（），就没有这个问题，但貌似有违初衷。