Почему мой DIV клик его дочерний DIV, когда jQuery перемещает его в IE?

Question

У меня есть два divs, оба с position:absolute;, один внутри другого. Родитель не находится в месте, где он может быть установлен как position:relative без дополнительного уровня сложности (вокруг него много других элементов, которые я должен был бы учитывать, чтобы разместить его там, где он должен быть, в самой верхней части страницы, над всем). Детский элемент создается для того, чтобы придерживаться нижней части родителя.

В Chrome, Safari, Firefox, все работает великолепно.

В IE он работает до тех пор, пока jQuery не перемещает родительский элемент - в этот момент родительский элемент закрепил его, поэтому вы можете едва видеть верхнюю часть дочернего элемента. Мне кажется, что я читал об этом, об IE отсечения дочерних элементов, но я не могу найти ответ, который относится к моему делу.

Это довольно просто, в основном:

<div id="parent" style="position:absolute;top:0;left:0;"> 
    [content] 
    <div id="tab" style="position:absolute;bottom:-30px;left:0;width:64px;height:32px;background-image:(...);"></div> 
</div> 
<script> 
$(document).ready(function() { 
    $("#tab").click(function() { 
      $("#parent").animate({"top":"-50px"},300); 
     }); 
}); 
</script> 

Answer 1

Если вы явно установить высоту parent элемента вы не должны иметь проблем больше. Если вы не знаете во время рендеринга, какой должна быть высота (IE это динамический контент), то что-то вроде этого должно работать:

$('#parent').height(function() { 
    var parentHeight = 0; 
    $('#parent').children().each(function() { 
     parentHeight += $(this).height(); 
    }); 
    return parentHeight; 
});