javascript - 为什么 IE 不立即执行我的 CSS 规则？

Question

我在使用 Internet Explorer(即使是最新的 IE11)时遇到问题。我正在尝试编写一些 JavaScript，允许我动态创建样式表，将其添加到文档并操作样式，其中大部分基于 David Walsh wrote 的文章.他的想法是设置创建的 style 标签的 media 属性，这样旧版浏览器就会简单地忽略它们不支持的规则——我非常喜欢这个想法，但是一个给我带来了一些问题。

当我创建一个 style 标签时，其 media 属性比 "screen" 更复杂，Firefox 和 Chrome 将立即应用新规则(假设媒体查询匹配)，但 IE 不会触发某种页面重绘(调整页面大小似乎最有效)。

我创建了一个 fiddle to better demonstrate the issue .我看到结果面板在 Firefox 和 Chrome 中的背景为绿色，但在 IE 中为红色，直到强制重绘。 至于实际强制重绘，我尝试了一些技巧但没有成功:

• document.body.className = document.body.className;
• element.appendChild(document.createTextNode(' '));
• document.body.style.width = (previousWidth + 1) + 'px'
• 将媒体查询简化为all and (min-width: 10px) 甚至只是(min-width: 10px)

我的问题是“如何让 IE 在添加样式时实现这些样式？”(或者至少，尽可能接近添加样式的时间，我可以接受setTimeout 需要)

我在网站本身上使用 jQuery，所以我会接受 jQuery 答案，但我更喜欢没有库依赖性的答案，这样我可以更好地理解导致问题的原因以及如何解决它。

Answer 1

如果您禁用 javascript 的第 65 行，它似乎可以工作:

// Webkit hack.
// element.appendChild(document.createTextNode(''));

由于这显然是一个 hack，也许它可以被删除，或者更优雅地解决。

Fiddle