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 d开发者_开发问答own 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?
overflow: hidden;
should do the work :)
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
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();
}
);
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!
加载中,请稍侯......
精彩评论