我这里有一个有趣的问题。我在元素上使用一个类作为开关来驱动我网站上的大量布局行为。
如果类被应用，某些事情就会发生，如果类没有被应用，它们就不会发生。 Javascript 用于应用和删除类。相关的CSS大致是这样的:
.rightSide { display:none; }
.showCommentsRight .rightSide { display:block; width:50%; }
.showCommentsRight .leftSide { display:block; width:50%; }
和 HTML:
<body class="showCommentsRight">
<div class="container"></div>
<div class="leftSide"></div>
<div class="rightSide"></div>
</div>
<div class="container"></div>
<div class="leftSide"></div>
<div class="rightSide"></div>
</div>
<div class="container"></div>
<div class="leftSide"></div>
<div class="rightSide"></div>
</div>
</body>
我已经简化了事情，但这基本上就是方法。当在主体上设置标志时，整个页面会更改布局(将右侧隐藏在三个不同的区域中)。这适用于 Firefox 和 IE8。在兼容模式下，它在 IE8 中不起作用。令人着迷的是，如果您坐在那里刷新页面，结果可能会有所不同。它将选择不同部分的右侧来显示。有时它只会显示顶部的右侧，有时会显示中间部分。
我试过:
- 验证器(用于查找格式错误的 html)
- 仔细检查我的 css 格式，然后...
- 确保我的 IE7 hack sheet 没有效果。
- 将标志类放在不同的非主体包装元素上(仍然具有相同的奇怪行为)
所以我的问题是:
- 有没有办法让这种行为变得可靠？
- IE7 什么时候决定重新做样式？
谢谢大家
最佳答案
听起来有点像我在 ie7 上遇到的问题，DOM 更新但屏幕上的像素没有更新(有时将鼠标悬停在它上面会触发重绘)。我发现了一个适用于我的情况的肮脏黑客 (spesudo-javascript):
//Just after changing the css class:
if(isIe7()){
addAnEmptyDivAboveTheChangedElement();
removeTheEmptyDivFromTheDom();
}
由于某种原因，这种添加和删除元素的粗暴技巧(如果您在任何地方添加和删除它甚至可能有效)会导致 ie7 重新绘制文档。它可能会导致闪烁，而且这是一个昂贵的 hack，因为它会强制在一个已经很慢的浏览器中完全重绘，这就是为什么我只在我确定它是 ie7 时才这样做(不要因为 ie7 是愚蠢的而减慢所有其他浏览器)。
但不能保证它会起作用...当我试图找到解决问题的方法时，我发现有很多不同的技巧都不起作用。修复 ie7 与 javascript 的不一致几乎是反复试验 woodoo。 :)
附言:
我看到切换 display 已经被建议，它可能有效，或者就像我的情况一样，它没有。实际上，我必须从 dom 树中删除该元素才能使其正常工作..
关于javascript - IE7 什么时候重新计算样式？将类添加到正文时不能可靠地工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2458579/