Question

我有两个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>

Answer 1

如果您明确设置parent元素的高度，则不应再出现问题。如果你在渲染时不知道高度应该是多少（IE是动态内容），那么这样的东西应该有效：

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

当jQuery在IE中移动它时，为什么我的DIV剪辑它的子DIV？

1 个答案: