jQuery 幻灯片 : Parent element doesn't expand?

Question

此问题出现在我们喜爱的 Internet Explorer 7 中:

我有一个项目列表，每个项目都有一个隐藏的子 div。当用户单击任何列表项中的“展开”按钮时，隐藏的 div 将向下展开并将其下方的所有内容推低。

这就像在 FF、Chrome、IE8 中一样工作 - 但 IE7 不会将父元素及其子元素一起展开。这是值得注意的，因为最顶部的父容器在最底部有一个绝对定位的图像(是的......圆角) - 当内容展开时不会被推下。

我猜这是因为绝对定位...只是想知道我是否应该尝试在 jQuery 中为此编写一些巨大的解决方法(假设我能够)，或者这是否是一个已知问题某种程度。

我的 HTML:

<div id="container">
   <ul>
      <li>Click here to expand
          <div class="hide"></div>
      </li>
      <li>Click here to expand
          <div class="hide"></div>
      </li>
      <li>Click here to expand
          <div class="hide"></div>
      </li>
   </ul>

   <div id="containerbottom"></div>
</div>

CSS:

#container { position:relative; }
#container #containerbottom { position:absolute; bottom:0px; left:0px; }

jQuery 几乎就是您的日常幻灯片功能:

$('ul li').click(function() {
   $(this).children('.hide').slideDown(200);
});

有什么想法吗？

Answer 1

经过多次测试，这是我发现的:

$(document).ready(function(){

   $('ul li').click(function() {

     $(this).children('.hide').slideDown(200, function(){

       if($.browser.msie && $.browser.version == '7.0' ){
          $('#containerbottom').css('top',$(this).closest('ul').height()+'px');
       }

     });

   });

})

虽然不是那么好，但是解决了问题...