绝对定位的子元素在父容器的动画期间被剪裁 [英] Absolutely positioned child element gets clipped during animation of parent container

问题描述

我创建了一个在悬停时生长的框。
该框中有一个缩略图，它是 position：absolute ，大于父框。

当我对父容器的宽度或高度进行动画处理时，缩略图会裁剪为父对象的大小，但只在动画期间。

演示（在Chrome中使用chrome / safari / ff测试）：
http://jsfiddle.net/Q2BPx / 3 /

我做错了什么？

解决方案

我不知道你在做任何错误本身。

当运行animate方法时，jQuery使用内联样式来设置每个框架的动画。它还将风格overflow：hidden添加到内联样式中。

您可以通过添加以下内容来破解扩展器的css：overflow：visible！

这将防止内嵌溢出：隐藏以缩略您的缩略图。

但是，您可能想要查看jQuery代码看看为什么animate正在使用溢出设置。

或者，至少要测试您的网页，以确保您没有使用overflow：visible！important;

引入异常

I created a box that grows on hover. The box has a thumbnail inside it that is position:absolute and bigger than the parent box.

When I animate the width or height of the parent container, the thumbnail gets cropped to the size of the parent, but only during the animation.

See here for a simple demo (tested in chrome/safari/ff on mac): http://jsfiddle.net/Q2BPx/3/

What am I doing wrong?

解决方案

I don't know that you are doing anything "wrong" per se.

When the animate method is running jQuery uses inline style to set the width for each frame of the animation. It also adds the style "overflow: hidden" into the inline style.

You can hack the css of expander by adding: overflow: visible !important;

This will prevent the inline overflow: hidden from making your thumbnail being cropped.

But, you might want to look into the jQuery code to see why animate is using the overflow setting.

Or, at least test your page to make sure you have not introduced an anomaly by using the overflow: visible !important;

这篇关于绝对定位的子元素在父容器的动画期间被剪裁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！