从 Internet Explorer 中的字符串插入 <style> 标记答案

【问题标题】：Inserting <style> tags from a string in Internet Explorer从 Internet Explorer 中的字符串插入 <style> 标记
【发布时间】：2011-11-01 21:24:42
【问题描述】：

我正在通过 AJAX 加载一个类似于

的字符串

<style>[some definitions]</style>
<h1>Lots of Markup</h1>
<p>follows here</p>

使用 Webkit/Gecko，一切都按预期工作——插入标记，应用样式。在 IE (8) 中，样式定义被忽略。实际上，如果您使用开发人员工具，它们就没有了。

您可以在这个 JS-Fiddle 中看到它不起作用：http://jsfiddle.net/J4Yzr/

此外，我还看到了创建临时 DOM 对象、将其设置为您的标记的 innerHTML 并将您的标记作为 DOM 对象从临时元素中提取的技巧。这不适用于样式标签（如果我做得对，我正在使用prototypeJS）：

var text = '<style>h1{color:red;}</style> style added',
    el   = new Element('div').update(text);

console.log(el.firstChild);
//is a HTMLStyleElement in Webkit but a [object Text] in IE

如果您从这样的字符串中获取<style>，是否有人建议如何在 IE 中正确应用它？

【问题讨论】：

是prototype.js语法吗？如果是，请添加标签。

标签： javascript internet-explorer internet-explorer-8 prototypejs

【解决方案1】：

我遇到了同样的问题，所以我尝试了你的解决方案，但你猜怎么着？当我在渲染通过 Ajax 检索到的标记后剥离
时，标记从 DOM 中消失了！回到第一格。

所以我的解决方案是在前面添加：

<hr style='display:none'/>

这很好地解决了问题。非常感谢您解决了这个问题。

【讨论】：

【解决方案2】：

好吧，这太疯狂了。在您的字符串前面添加一个<br/>-Tag，它可以在 Internet Explorer 中使用。

<br/><style>[some definitions]</style><h1>Lots of Markup</h1>

您甚至不需要创建临时 DOM-Object 即可将代码插入其中。只需将其附加到您的网站即可。

我现在正在做的是插入带有<br/>-Tag 的代码，然后删除<br/>。它很乱，但它有效。

【讨论】：