Подтвердить что ты не робот

Динамическая загрузка CSS-таблицы стилей не работает на IE

Я динамически загружаю таблицу стилей CSS (с небольшой помощью jQuery), например:

var head = document.getElementsByTagName('head')[0];
$(document.createElement('link'))
    .attr({ type: 'text/css', href: '../../mz/mz.css', rel: 'stylesheet' })
    .appendTo(head);

Это отлично работает в Firefox и Google Chrome, но не в IE.

Любая помощь? Благодаря

4b9b3361

Ответ 1

Как только IE обработает все стили, загруженные страницей, единственный надежный способ добавить другую таблицу стилей - document.createStyleSheet(url)

Более подробную информацию см. в статье MSDN в файле createStyleSheet.

url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}

Ответ 2

Вам нужно установить последнее значение href attr и только после добавления элемента elem в голову:

$('<link>')
  .appendTo('head')
  .attr({type : 'text/css', rel : 'stylesheet'})
  .attr('href', '/css/your_css_file.css');

Ответ 3

Это также работает в IE:

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = '/includes/style.css';
document.getElementsByTagName('head')[0].appendChild(link);

Ответ 4

Это может также иметь к этому какое-то отношение - взято из Статья поддержки Microsoft:

Стили на веб-странице отсутствуют или выглядят некорректно при загрузке страницы в версиях Microsoft Internet Explorer...

... Эта проблема возникает из-за того, что в Internet Explorer:

  • Все теги стиля после того, как первые 31 стиль тегов не применяется.

  • Все правила стиля после первые 4095 правил не применяются.

  • На страницы, которые используют правило @import для постоянно импортировать внешний стиль листы, которые импортируют другие таблицы стилей, таблицы стилей, которые более трех Уровни глубины игнорируются.

Ответ 5

Кажется, что

$('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 

работает также в IE, пока URL-адрес является полным URI, включая протокол...

Ответ 6

Откройте ie8 без отладки. Когда вы доберетесь до точки динамической таблицы стилей... откройте отладчик и вуаля, они должны быть там.