在 IE8 中强制重新计算样式

Question

如何最准确地强制浏览器重新计算样式，无论是在整个主体上还是在单个元素上？

我不能简单地通过替换 innerHTML 或其他东西来重新加载整个 DOM，因为这会丢失所有附加的事件处理程序，所以我需要使用只会强制浏览器重新计算样式的东西。这确实需要与 IE8 一起使用。

我已经尝试搜索任何可以解决此问题的方法，但至少对于“重新计算样式”一词我没有找到任何地方，我能找到的与“重新加载样式”相关的唯一结果是“How to refresh the style of a page after css switch” .不过，这个问题对我不起作用，因为我不是直接更改需要更改样式的元素的类，而是它的兄弟。

Here is a simplified demo，只需相关代码：

HTML：

<span id="foo">This gets a class,</span>
<div>...and this should become red,</div>
<button onclick="document.getElementById('foo').className = 'foo';">...if you click here</button>

CSS：

span.foo + div {color:red;}

如果您测试该演示，至少在 IE11 的 IE8 仿真模式下，您会发现样式不会更新。对我来说，它只有在我在 F12 界面的 DOM 查看器中选择了节点后才会更新。 （PS：IE8-emulation模式在IE11的F12界面底部标签）。

Answer 1

我在 IE11 上遇到了类似的问题——它在 Vue.js 应用程序的特定部分出现了奇怪的 z-index 问题。检查受影响的元素或调整窗口大小突然导致它自行修复。

我发现我可以通过使用通用 CSS 选择器添加和删除样式标签来强制重新计算整个正文的样式：

var head = document.querySelector("head");
var style = head.appendChild(document.createElement("style"));
var styleSheet = document.styleSheets[document.styleSheets.length - 1];
styleSheet.insertRule("* { }", 0);
head.removeChild(style);

灵感来自answer to another question。

Answer 2

在+ selector 所针对的元素的祖先上切换一个类：

$('body').addClass('ie_force_restyle').removeClass('ie_force_restyle');

这将强制 IE8- 重新执行匹配给定元素的所有后代的选择器。

为了更高效，您也可以定位 #foo 的父级：

$('#foo').parent().addClass('ie_force_restyle').removeClass('ie_force_restyle');

Demo

在 Windows 7 x64 - IE8 上测试。

注意：我只测试了相邻的兄弟选择器+，但我很确定它应该适用于~、:first-child 和其他不响应旧的 DOM 更改的选择器即。

_{不过，我不能声称是原创，我在为 IE8 开发 :checked pseudo-class polyfill 时，在互联网的某个黑暗角落找到了这个解决方案。}