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

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

我不能简单地通过替换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;}

如果测试演示，至少在IE8仿真模式，IE11，你会发现风格不会更新。对我而言，它只会在我在F12界面的DOM查看器中选择节点后才会更新。（PS：IE8仿真模式位于IE11 F12界面的底部）。

来源

2014-01-14 Joeytje50

请不要使用内嵌JavaScript。它导致可读性差，通常是不好的做法。 –

如果您需要支持IE 8，则应该在IE 8中进行测试，而不是在模拟器中进行测试，这可能会导致实际浏览器中可能不存在的问题。 – Pavlo

@RJJordan就像我说的，我做了一个简化版本。这只是一个非常快速的演示。 – Joeytje50

切换在元件的祖先类被针对性由+ 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 64位系统 - IE8。

注：我只测试了这对相邻的兄弟选择+，但我敢肯定，它应该~，:first-child和其他选择工作不反应DOM改变旧的IE浏览器。

_{虽然我不能声称独创性，但我在IE8的:checked pseudo-class polyfill上工作时，在互联网的黑暗角落发现了这个解决方案。}

来源

2014-01-14 19:54:42

我很抱歉花了这么长时间才将您的答案标记为“已接受”，但由于某种原因，它说“您可以在1分钟内接受答案”。尽管感谢您的帮助！ – Joeytje50

不客气。 '=]' –

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

回答

相关问题