jQuery：使用slideUp（）/ slideDown（）时IE8边距崩溃

我在这里上传了一个测试文件：

http://dl.dropbox.com/u/2201804/IE8test.html

如果单击“Click me”div，您将看到使用slideDown（）显示“Feedback”div。 单击另一个框中的“单击我”可以滑动当前显示的反馈并向下滑动相应的反馈。

在IE8中，在完成slideUp（）/ slideDown（）操作后，框之间的边距会折叠。

这是jQuery的动画或IE8中的显示错误的问题吗？

Answer 1

溢出：隐藏;

应该做的工作:)

Answer 2

我没有使用边距的解决方案，但如果用填充替换边距，IE8将会播放。 在你的情况下，你需要一个额外的容器div，因为你已经在使用填充，并且你有一个背景颜色集。

所以你的解决方案看起来像这样：

 
 
 ... .assessment { padding-top: 20px; background: transparent; } .assessment .inner { background-color:#DDDDDD; border:1px solid #CCCCCC; color:#555555; display:block; padding:10px 0; text-align:left; width:100%; } 

干杯tj

Answer 3

只是用我的解决方案更新这个旧线程，因为我无法使用CSS解决问题。 我使用了slideToggle的回调函数来关注文档正文，因为我注意到点击页面上的任何其他位置似乎会导致DOM的重排并且边缘返回。

 .slideToggle( 500, function() { document.body.focus(); } ); 

Answer 4

使用这个“溢出：隐藏”建议时，我仍然遇到边缘消失的问题，并决定通过使用仍会显示或隐藏元素的自定义函数覆盖’默认’jQueryfunction，完全禁用在IE8中的slideUp / slideDownfunction，但仅在使用IE8时。

为了实现这一点，我使用IE条件注释将类附加到html元素，如下所示：

然后，我在我的javascript中定义了以下函数来覆盖slideUp / slideDown函数，如下所示：

 (function($) { // disable slideDown/slideUp in IE8 due to margin removal issue if ($('html').hasClass('ie8')) { $.fn.slideDown = function() { return this.show(); }; $.fn.slideUp = function() { return this.hide(); }; } })(jQuery); 

就我而言，这解决了我的问题。 希望这可以帮助！