Вставка <style>тегов из строки в Internet Explorer - PullRequest
Новая
       26

Вставка <style>тегов из строки в Internet Explorer

2 голосов
/ 23 августа 2011

Я загружаю строку через AJAX, которая выглядит как 

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

При использовании Webkit / Gecko все работает как положено - разметка вставлена, стили применены. В IE (8) определения стилей игнорируются. На самом деле, если вы используете инструменты разработчика, они ушли.

В этой JS-скрипке видно, что она не работает: 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, если вы получаете его из такой строки?

Ответы [ 2 ]

1 голос
/ 05 декабря 2011

У меня была такая же проблема, поэтому я попробовал ваше решение, но угадайте что? Когда я удалил
после рендеринга разметки, полученной через Ajax, теги исчезли из DOM! Вернуться на круги своя.

Так что мое решение состоит в том, чтобы вместо этого добавить: 

<hr style='display:none'/>

Что сработало хорошо. Большое спасибо за решение этой проблемы.

1 голос
/ 23 августа 2011

Хорошо, это безумие.Добавьте <br/> -Tag перед вашей строкой, и он работает в Internet Explorer. 

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

Вам даже не нужно создавать этот временный DOM-объект для вставки кода.Просто добавьте его на свой сайт.

То, что я сейчас делаю, вставляет код с тегом <br/> и затем удаляет <br/>.Это грязно, но работает.

...