jQuery：使用 slideUp()/slideDown() 时 IE8 边距折叠答案

【问题标题】：jQuery: IE8 margin collapses when using slideUp()/slideDown()jQuery：使用 slideUp()/slideDown() 时 IE8 边距折叠
【发布时间】：2015-07-04 02:58:23
【问题描述】：

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

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

如果您单击“单击我”div，您将看到使用 slideDown() 出现的“反馈”div。单击另一个框中的“单击我”会向上滑动当前显示的反馈并向下滑动相应的反馈。

在 IE8 中，slideUp()/slideDown() 动作完成后，框之间的边距折叠。

这是 jQuery 的动画问题还是 IE8 的显示错误？

【问题讨论】：

标签： jquery internet-explorer-8

【解决方案1】：

溢出：隐藏；

应该做的工作:)

【讨论】：

在 IE8 中遇到了同样的问题，添加溢出：隐藏到增长/收缩的元素解决了它！。
这对我也有用。任何人都可以解释为什么这有效吗？它只是一个IE错误吗？ IE9 做同样的事情吗？
我也想知道它为什么起作用......溢出：隐藏与消失的边距有什么关系？
我猜这是因为 IE8 需要在带有边距的滑动元素上设置块格式化上下文。您可以使用其他属性来解决此问题，但溢出：隐藏似乎是最合适的。你可以阅读这个here
您能否编辑您的答案以明确告知您要将此规则添加到哪个元素？谢谢。

【解决方案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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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);

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

【讨论】：