带有 CSS3Pie 和 jQuery 动画的 IE7 错误答案

【问题标题】：IE7 bug with CSS3Pie and jQuery animations带有 CSS3Pie 和 jQuery 动画的 IE7 错误
【发布时间】：2012-01-17 09:30:50
【问题描述】：

大家好，希望有人能帮我解决这个问题。

我正在使用 CSS3Pie 在盒子上获得圆角，并且在包括 IE7 在内的所有浏览器中一切正常。但是，当您将动画（这次是slideToggle）添加到我的盒子中的一个元素时，IE7 开始表现得就像您没有但position:relative 时一样。元素变得很大，5000px x 10000px +++。我确信所有元素都有position:relative当他们需要的时候。

我之前看到过这个错误，我们找到了一个解决方法，其中包括之前对 CSS3Pie 文件的一些 JS 修复，但我再也找不到它了。

感谢我能得到的所有帮助。

谢谢吉米

您可以在下面的图片中看到，灰色背景并没有在框结束的地方结束，它只是延续到网站上的其他元素之上。

这是向下滑动元素的css

#grades .form-content {
    margin:0 10px;
    padding:10px;
    width:93.8%;
    background:#fff;
}

这是盒子的css：

.m-pc {position:relative;}

.m-pc .m-c {
    position:relative;
    padding:38px 21px 10px;
    margin-bottom:25px;
    border:1px solid #cbcbcb;
    border-top:none;
    -moz-box-shadow:0 1px 5px #e3e4e3; /* FF3.5+ */
    -webkit-box-shadow:0 1px 5px #e3e4e3; /* Saf3.0+, Chrome */
    box-shadow:0 1px 5px #e3e4e3; /* Opera 10.5, IE 9.0 */
    background:#f6f6f6;
    behavior:url(/css/vendor/pie.htc);
}

.m-pc .m-h {
    position:relative;
    border:1px solid #cbcbcb;
    -webkit-border-radius:6px 6px 0 0;
    -moz-border-radius:6px 6px 0 0;
    border-radius:6px 6px 0 0;
    background:#eee;
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e5e5e5));
    background:-webkit-linear-gradient(#eee, #e5e5e5);
    background:-moz-linear-gradient(#eee, #e5e5e5);
    background:-ms-linear-gradient(#eee, #e5e5e5);
    background:-o-linear-gradient(#eee, #e5e5e5);
    background:linear-gradient(#eee, #e5e5e5);
    -pie-background:linear-gradient(#eee, #e5e5e5);
    behavior:url(/css/vendor/pie.htc);
}

【问题讨论】：

您是否尝试将 position:relative 放在父元素上？我发现这有时会有所帮助。
是的，正如我所说的“我确信所有元素在需要时都有位置：相对”。这不是这里的问题。

标签： jquery jquery-animate css3pie

【解决方案1】：

动画开始时可能是双边距问题，您可以发布动画样式吗？

#grades .form-content {
    margin:0 10px;
    *margin:0 5px;
    *zoom:1;
    padding:10px;
    *padding:5px;
    width:93.8%;
    background:#fff;
}

问题似乎来自动画样式本身，还是您只是使用slideToggle？

.animate({
    'left/right/top/bottom' : ?
});

【讨论】：

是的，我只使用带有“slow”的slideToggle。我会试着看看你的更新是否有变化。
现在效果更好，但不是每次。
好的，谢谢，我会试着看看我能从中得到什么。如果我发现了什么，我会更新。

【解决方案2】：

我现在找不到该帖子，但另一位发帖人的帮助为我解决了类似问题。为动画添加回调以重新计算位置：

 $('.your_div').animate(function () {
            if ($.browser.msie) {
                $(this).each(function () { $(this).resize(); });
            }
        });

【讨论】：