Question

我在使用Internet Explorer时遇到困难（即使是与IE11一样的最新版本）。我正在尝试编写一些JavaScript，它允许我动态创建样式表，将其添加到文档中并操作样式，其中大部分基于David Walsh wrote的文章。他想要设置创建的media标记的style属性，这样旧版浏览器就会忽略他们不能支持的规则 - 这是我真正喜欢的一个想法，但却让我有一些想法问题。

当我创建一个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(''));

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

Fiddle

Answer 2

您是否尝试过添加<!DOCTYPE>？我不了解您所面临的情景，但是IE <!DOCTYPE>中的样式问题解决了我的问题。它说浏览器关于您正在使用的HTML版本，以便浏览器可以准确地呈现您所需的视图。对于HTML5，它很简单<!DOCTYPE html>。您将找到所有doctype here的列表。

<!DOCTYPE html>
<html>
   <body>

   </body>
</html>

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

2 个答案: