Почему мой DIV обрезает свой дочерний DIV, когда jQuery перемещает его в IE? - PullRequest
Новая
       9

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

0 голосов
/ 11 февраля 2011

У меня есть два div, оба с 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>

1 Ответ

0 голосов
/ 11 февраля 2011

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

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