Question

如何最准确地强制浏览器重新计算整个身体或单个元素的样式？

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

我已经尝试过搜索可以解决这个问题的任何内容，但至少使用“重新计算样式”这个词，我没有得到任何结果，而且我能找到的“重新加载样式”的唯一相关结果是“{{3} }”。这个问题对我来说不起作用，因为我不是直接改变需要改变样式的元素的类，而是它的兄弟。

How to refresh the style of a page after css switch，只提供相关代码：

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仿真模式位于IE11的F12界面的底部选项卡中。）

Answer 1

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

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

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和其他选择器对旧IE中的DOM更改做出反应。

_{我不能声称原创性，我在互联网的黑暗角落找到了这个解决方案，而我正在为IE8工作:checked pseudo-class polyfill - 。}

在IE8中强制重新计算样式 -

2 个答案: