div之间的IE8空间正在缩小答案

【问题标题】：IE8 space between divs is shrinkingdiv之间的IE8空间正在缩小
【发布时间】：2012-05-30 14:50:16
【问题描述】：

我有一个使用 div 构建的菜单，每个部分由 2 个 div（标题和内容）组成。单击标题时内容会折叠或展开，但在 IE8 上，在展开和折叠部分后，部分 div 之间的空间正在缩小。IE9、Chrome 和 Firefox 正确显示所有内容

This 是它的外观，第一部分正确显示，其下方有空格，但其余部分空间缩小

奇怪的是，如果我调整窗口大小，一切看起来都很好again

This 是我正在使用的代码示例，this 是 jsfiddle

我希望有人解决了同样的问题。谢谢

【问题讨论】：

将标题和内容包装在一个 div 中，并使用容器 div 填充空间

标签： jquery css internet-explorer-8

【解决方案1】：

试试这个代码：

这里有问题的解释：

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>

【讨论】：