Question

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

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，因为你已经在使用填充，并且你有一个背景颜色集。

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

<div class="assessment">
  <div class="inner">
    <div class="question">
...

.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

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

为实现这一目标，我使用IE conditional comment将一个类附加到html元素，如下所示：

<!--[if IE 8]><html class="ie8"><![endif]-->

然后，我在我的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);

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

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

4 个答案: