Question

IE（9和10）有困难。没有测试IE8，但它可能是相同的情况。

简要说明：

我在<div/>
我限制height的{{1}} <div/>类设置为.height和100px。
点击“展开”链接后，overflow:hidden类会被jQuery删除，.height会扩展到其完整高度，以显示整个博文。
在Firefox和Chrome中精彩地工作。
在IE中，<div/>按预期展开，但在展开之前隐藏的所有图片仍然是隐藏的。
要使这些项目显示在IE中，您必须调整浏览器大小或将<div/>滚出视口，然后再返回。

Here is a JSFiddle that showcases the problem

我正在使用此代码来执行jQuery魔术：

<div/>

但为了解决这个问题，我需要（某种程度上）强制IE“重新展开”$('#BLOG').on('click', '.expand', function() { var $this = $(this); $this.closest('.POST-WRAPPER').find('.post').toggleClass('height') .toggleClass('overflow'); });曾经隐藏的部分，因为它已经扩展了。

有什么想法吗？

Answer 1

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

img {
    padding-left: 0;
}

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

Here is a demo

旁注：你应该重新考虑班级名称。更好地使用＆＃34;扩展＆＃34;或者＆＃34;倒塌＆＃34;或其他有意义的东西。而且您不需要overflow课程，因为overflow: visible无论如何都是default value。可能像this fiddle。

IE Bug：toggleClass和overflow：隐藏的问题

1 个答案: