jQuery slideDown: родительский элемент не расширяется?

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');
       }

     });

   });

})

это не так хорошо, но решает проблему ...