jquery - slideToggle 工作正常，除了在 IE 中，除非给出最小高度，否则 div 隐藏在最后？

Question

我用过 jQuery 的 slideToggle在 <div> 上以提供良好的旧“下拉”效果。

我让它在 chrome 中完全按照我想要的方式工作。然后我在 IE 中尝试了它并遇到了一些很奇怪的东西..我可以看到动画很好，<div>会扩展到它的全高，但是当动画结束时，<div>会消失吗？

我尝试了一些不同的方法来阻止它这样做，结果是给 <div>任何min-height (我给了它 1px)允许它工作。

我真的很想知道为什么必须给出 min-height在IE中使这个功能正常工作？把它放在那里没什么大不了的，但我更愿意理解为什么我必须把它放在那里。代码如下。

HTML 结构

<div class="home_popConfiCont rbAll">
<div class="home_popConfiHead">Your Confidential Details<div class="arrow-up"></div></div>
<div class="home_popConfiBody">
    Lots and lots of text
</div>
</div>

jQuery

$(function(){
    var confOpen = 0;
    $(".home_popConfiHead").click(function(){
        if(confOpen){
            $(".arrow-up").attr("class","arrow-up");
            $(".home_popConfiBody").stop(true, true).slideToggle(100);
            confOpen = 0;
        }
        else{
            $(".arrow-up").attr("class","arrow-up arrow-down");
            $(".home_popConfiBody").stop(true, true).slideToggle(100);
            confOpen = 1;
        }
    });
});

应用于所述 <div> 的 CSS :

.home_popConfiBody{padding:5px 5px 0 5px; display:none;line-height:20px;min-height:1px;}

Answer 1

您可能遇到了“hasLayout”问题。

http://reference.sitepoint.com/css/haslayout

有很多东西可以给你的 div 布局，你已经发现了其中之一:最小高度。除了最小高度之外，您还可以使用这些值(取自引用文章):

• 显示:内联 block
• 高度:(除自动以外的任何值)
• float :(左或右)
• position:absolute
• 宽度:(除自动以外的任何值)
• 书写模式:tb-rl
• 缩放:(除正常值外的任何值)4
• 最小高度:(任何值)
• 最大高度:(除无外的任何值)
• 最小宽度:(任意值)
• 最大宽度:(除无外的任何值)
• 溢出:(除了可见的任何值)
• overflow-x:(除了可见的任何值)
• 溢出-y:(除了可见的任何值)5
• 位置:固定

我认为人们通常会使用zoom: 1 来触发布局，因为它对页面内容没有任何明显的可见影响。

如果我切换的 div 内部有 float 元素，那么我通常会对 div 应用 overflow: hidden;。这会导致 div 扩展到内部 float 元素的高度。