IE Bug: toggleClass和overflow:隐藏问题

Question

使用IE(9和10)有困难。没有测试过IE8，但可能是相同的场景。

简短描述:

• 我有一篇博客文章在<div/>
• 我用.height类设置在100px和overflow:hidden来限制<div/>的height。
• 在点击"扩展"链接时，.height类被jQuery删除，<div/>扩展到它的全部高度，以显示整个博客文章。
• 在Firefox和Chrome中工作得很漂亮。
• 在IE中<div/>按预期展开，但所有在展开之前隐藏的图像仍然隐藏。
• 要使这些项目出现在IE中，你必须调整浏览器的大小或将<div/>滚动出视窗并再次返回。

下面是一个展示问题的JSFiddle

我使用这段代码来做jQuery的魔术:

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

但是为了解决这个问题，我需要(以某种方式)强制IE在<div/>扩展时"重新绘制"曾经隐藏的部分。

任何想法?

Answer 1

好吧，通常我不会建议一个hack，但由于这是一个bug，一个hack似乎是ok的:尝试强迫IE重新绘制。一个有效的解决方案，在你的例子中没有任何明显的副作用是在<img/>上使用padding-left:

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

这是一个演示。

---

旁注:您应该重新考虑类名。最好用"expanded"或"collapse "或其他有意义的词。而且您不需要overflow类，因为overflow: visible是默认值。