1

我slideToggle在 a 上使用了jQuery<div>来提供良好的旧“下拉”效果。

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

我尝试了一些不同的方法来阻止它这样做，结果证明给<div>any 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;
        }
    });
});

应用于上述的 CSS <div>：

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

1 回答 1

1

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

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

有很多东西可以给你的 div 布局，你已经发现了其中之一：最小高度。除了 min-height 您还可以使用这些值（取自参考文章）：

  • 显示：内联块
  • 高度：（除自动之外的任何值）
  • 浮动：（左或右）
  • 位置：绝对
  • 宽度：（除自动之外的任何值）
  • 写作模式：tb-rl
  • 缩放：（除正常值外的任何值）4
  • 最小高度：（任何值）
  • 最大高度：（除无之外的任何值）
  • 最小宽度：（任何值）
  • 最大宽度：（除无之外的任何值）
  • 溢出：（除可见之外的任何值）
  • 溢出-x：（除可见之外的任何值）
  • 溢出-y：（除可见之外的任何值）5
  • 位置：固定

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

如果我正在切换的 div 里面有浮动元素，那么我通常会应用一个溢出：隐藏；到 div。这会导致 div 扩展到内部浮动元素的高度。

于 2012-12-11T15:02:43.443 回答