jquery - IE 漏洞 : toggleClass and overflow:hidden issue

Question

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

简要说明:

• 我在 <div/> 中有一篇博文
• 我正在限制 height的 <div/>用.height类设置为 100px和 overflow:hidden .
• 点击“展开”链接后 .height使用 jQuery 和 <div/> 删除类展开至全高，以显示整篇博文。
• 在 Firefox 和 Chrome 中运行良好。
• 在 IE 中 <div/>按预期扩展，但在扩展之前隐藏的所有图像仍然隐藏。
• 要使这些元素出现在 IE 中，您必须调整浏览器大小或滚动 <div/>离开视口(viewport)并再次返回。

Here is a JSFiddle that showcases the problem

我正在使用这段代码来施展 jQuery 魔法:

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

但要解决这个问题，我需要(以某种方式)强制 IE“重新绘制”<div/> 的曾经隐藏的部分|随着它的扩展。

有什么想法吗？

Answer 1

好吧，通常我不会建议破解，但由于这是一个错误，破解似乎没问题:尝试以某种方式强制 IE 重绘。一种有效且在您的示例中没有任何可见副作用的解决方案是使用 padding-left在 <img/> 上:

img {
    padding-left: 0;
}

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

Here is a demo .

---

旁注:您应该重新考虑类名。最好使用“展开”或“折叠”或其他有意义的词。而且你不需要 overflow类因为overflow: visible是default value反正。可能像 this fiddle .