IE错误:toggleClass和溢出:隐藏的问题 [英] IE Bug: toggleClass and overflow:hidden issue

问题描述

使用IE遇到困难(9和10).尚未测试IE8，但这可能是相同的情况.

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

简要说明:

• 我在<div/>
中有一篇博客文章
• 我通过在100px和overflow:hidden上设置的.height类来限制<div/>的height.
• 单击展开"链接后，将使用jQuery删除.height类，并且<div/>展开至其完整高度，以显示整个博客文章.
• 在Firefox和Chrome中可以很好地工作.
• 在IE中，<div/>会按预期扩展，但是在扩展之前隐藏的所有图像仍会隐藏.
• 要使这些项目显示在IE中，您必须调整浏览器的大小或将<div/>滚动出视口并再次返回.

• 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.

这里是展示问题的JSFiddle

我正在使用以下代码来执行jQuery魔术:

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');
});

但是要解决此问题，我需要(以某种方式)迫使IE在重新扩展<div/>曾经隐藏的部分时对其进行重新绘制".

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

有什么想法吗?

推荐答案

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

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;
}

此处是演示.

旁注:您应该重新考虑类名.最好使用扩展"或折叠"或其他有意义的内容.而且您不需要overflow类，因为overflow: visible是默认值.可能类似于这把小提琴.

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.

这篇关于IE错误:toggleClass和溢出:隐藏的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！