IE Bug: toggleClass and overflow:hidden issue

问题

Having difficulties with IE (9 and 10). Have not tested IE8, but it's probably the same scenario.

Brief description:

• I have a blog post inside a <div/>
• I am restricting the height of the <div/> with a .height class set at 100px and overflow:hidden.
• Upon clicking an "Expand" link the .height class is removed with jQuery and the <div/> expands to its full height, to display the entire blog post.
• Works beautifully in Firefox and Chrome.
• In IE the <div/> expands as expected, but all images that were hidden before the expand are still hidden.
• To make those items appear in IE, you have to resize the browser or scroll the <div/> out of the viewport and back again.

Here is a JSFiddle that showcases the problem

I am using this code to do the jQuery magic:

$('#BLOG').on('click', '.expand', function() {
    var $this = $(this);
    $this.closest('.POST-WRAPPER').find('.post').toggleClass('height')
                                                .toggleClass('overflow');
});

But to fix the problem, I need to (somehow) force IE to 'repaint' the once hidden part of the <div/> as it's expanded.

Any ideas?

回答1:

Well, normally I would not suggest a hack, but since this one is a bug, a hack seems to be ok: Try to force IE the redraw somehow. One solution that works and in your example does not have any visible side effects is using padding-left on the <img/>:

img {
    padding-left: 0;
}

.height img {
    padding-left: 1px;
}

Here is a demo.

---

Sidenote: You should reconsider the class names. Better use "expanded" or "collapsed" or something else that's meaningful. And you do not need the overflow class because overflow: visible is the default value anyway. Could be like this fiddle.

来源：https://stackoverflow.com/questions/16802941/ie-bug-toggleclass-and-overflowhidden-issue