Элементы Angular и IE8 HTML5 не стилизованы внутри ng-view

Итак, я пытаюсь заставить angular работать с IE8. Я выполнил все шаги на http://docs.angularjs.org/guide/ie. и, похоже, это работает — я вижу содержимое ng-view, отображаемое в IE8, когда переключаюсь между представлениями.

Проблема в том, что я на самом деле не вижу никакого контента в инспекторе:

введите здесь описание изображения

.. это просто пустой тег ng-view. Я могу видеть весь контент на странице, но никакие стили не применяются ни к чему внутри ng-view.

Я не уверен, является ли это проблемой angular или HTML5. Я добавил html5shiv, и элементы HTML5 за пределами ng-view красиво оформлены.

ИЗМЕНИТЬ

Я определил, что проблема в элементах HTML5. <section> и <article> не стилизуются внутри ng-view, в то время как простые элементы div получают все указанные стили. Вне ng-view, <nav> и <header> прекрасно стилизованы.


html angularjs angular-template internet-explorer-8
person Elise    schedule 12.12.2013    source источник
comment
вы импортируете теги <link> или <style> в шаблон?   -  person charlietfl    schedule 13.12.2013
comment
@charlietfl Все мои таблицы стилей определены в <head> страницы, включая те, которые должны применяться к шаблонам.   -  person Elise    schedule 13.12.2013

Ответы (2)


arrow_upward
1
arrow_downward

Я смог исправить это, условно включив jQuery в IE8 на основе ответа, приведенного здесь https://stackoverflow.com/a/18317832/2026098

person Elise    schedule 14.12.2013
comment
Включить jQuery, если IE8? У меня та же проблема, но я не знаю, как ее исправить... Включить ее до или после Angular? - person tom10271; 23.03.2014
comment
jQuery необходимо включить в <head>. Я включил angularjs непосредственно перед закрытием файла </body>. - person Elise; 23.03.2014

arrow_upward
1
arrow_downward

Проблема здесь в том, что даже если вы добавите пространство имен и/или предварительно создадите свои элементы в соответствии с руководством IE, есть определенные части ядра angular, которые не проходят через обычное создание элемента jQuery. при использовании полного jQuery вместо jQLite Angular, но я слышал, что это исправляет ситуацию для большинства людей. Использование прокладки HTML5 само по себе также не решает проблему.

Но даже в этом случае я бы предпочел не иметь замену jQuery, если это возможно, и в этом случае вам также нужно будет сделать следующее, чтобы получить полностью работающее решение:

  • Добавьте стили сброса для элементов HTML5 на уровне блоков, чтобы они display: block; правильно
  • Настройте таргетинг на элементы HTML5 с помощью префикса двоеточия в вашем CSS. Вам нужно избежать их, это будет выглядеть так: header, \3A header { /*...*/ }. Обратите внимание, что между управляющей последовательностью и остальной частью селектора есть пробел.
  • Если вы используете jQuery, вам потребуется использовать версию 1.10.x или условные теги, чтобы переключиться на нее в IE8.
person pospi    schedule 16.04.2014
comment
Позже, протестировав ie8 в Windows XP, я могу подтвердить, что добавление \:section, \:article... { display: block} — это то, что решило проблему для меня. - person Elise; 17.04.2014
comment
Уточняю для тех, кто читает: использование \3A header или \:header в таблице стилей совершенно эквивалентно, я предпочитал формат шестнадцатеричного кода, поскольку у моего препроцессора (в данном случае LESS) были проблемы с разбором синтаксиса с экранированием двоеточия. - person pospi; 21.04.2014