为什么IE不能立即实现我的CSS规则？

Question

我在使用Internet Explorer时遇到了困难(即使是最新的IE11).我正在尝试编写一些JavaScript,它允许我动态创建样式表,将其添加到文档中并操作样式,其中大部分基于David Walsh撰写的文章.他有想法设置media创建style标签的属性,因此旧版浏览器将简单地忽略他们无法支持的规则 - 这是我真正喜欢的一个想法,但却引起了一些问题.

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

我创造了一个小提琴来更好地展示这个问题.我看到结果面板在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(''));

由于这显然是一个黑客行为，也许可以将其删除，或者更优雅地解决。

小提琴