jQuery: IE8 margin collapses when using slideUp()/slideDown()

问题

I've uploaded a test file here:

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

If you click on the "Click me" divs, you'll see the "Feedback" divs appear using slideDown(). Clicking a "Click me" in another box slides the currently showing feedback up and slides down the appropriate feedback.

In IE8, after the slideUp()/slideDown() actions are complete, the margin between the boxes collapses.

Is this a problem with jQuery's animation or a display bug in IE8?

回答1:

overflow: hidden;

should do the work :)

回答2:

I don't have a solution for you using margins, but if you replace margin with padding, IE8 will play along. In your case, you would need an extra container div, because you are already using the padding and you have a background colour set.

So your solution could look like this:

<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%;
}

Cheers tj

回答3:

Just updating this old thread with my solution as I wasn't able to solve the problem using CSS. I used the callback function of slideToggle to focus on the document body because I noticed that clicking anywhere else on the page seemed to cause a reflow of the DOM and the margins came back.

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

回答4:

I was still having issues with margins disappearing using this "overflow: hidden" suggestion, and decided to simply disable the slideUp/slideDown functionality entirely in IE8 by overriding the 'default' jQuery functionality with a custom function that would still show or hide the element, but only when IE8 was being used.

To achieve this, I used an IE conditional comment to append a class to the html element, like so:

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

Then, I defined the following function in my javascript to override the slideUp/slideDown function, like so:

(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);

And that solved the issue for me, as far as I'm concerned. Hope this helps!

来源：https://stackoverflow.com/questions/2517077/jquery-ie8-margin-collapses-when-using-slideup-slidedown

标签

jquery

internet-explorer-8