Angular 和 IE8——在 ng-view 中没有样式化的 HTML5 元素答案

【问题标题】：Angular and IE8 -- HTML5 elements not styled inside ng-viewAngular 和 IE8——在 ng-view 中没有样式化的 HTML5 元素
【发布时间】：2014-04-17 07:23:59
【问题描述】：

所以我正在尝试在 IE8 上进行 Angular 工作。我已按照http://docs.angularjs.org/guide/ie 上的所有步骤进行操作，并且它似乎正在工作——当我在视图之间切换时，我看到了在 IE8 上呈现的ng-view 的内容。

问题是我实际上并没有在检查器中看到任何内容：

.. 它只是一个空的 ng-view 标签。我可以看到页面上的所有内容，但没有样式应用于ng-view 中的任何内容。

我不确定这是角度问题还是 HTML5 问题。我在ng-view 之外添加了html5shiv 和HTML5 元素的样式很好。

编辑

我确定问题出在 HTML5 元素上。 <section> 和 <article> 在 ng-view 内部没有样式，而简单的 div 接收所有指定的样式。 ng-view、<nav> 和 <header> 之外的样式都很好。

【问题讨论】：

您是在模板中导入<link> 还是<style> 标签？
@charlietfl 我所有的样式表都在页面的<head> 中定义，包括那些应该应用于模板的样式表。

标签： html angularjs internet-explorer-8 angular-template

【解决方案1】：

我能够根据此处给出的答案https://stackoverflow.com/a/18317832/2026098 有条件地在 IE8 中包含 jQuery 来解决此问题

【讨论】：

如果 IE8 包含 jQuery？我有同样的问题，但不知道如何解决它...在 Angular 之前或之后包含它？
jQuery 需要包含在<head> 中。我在关闭 </body> 之前包含了 angularjs。

【解决方案2】：

这里的问题是，即使您根据 IE 指南添加命名空间和/或预先创建元素，角核心的某些部分也不会通过正常的 jQuery 元素创建 - 我有即使使用完整的 jQuery 而不是 Angular 的 jQLite，问题仍然存在，但我听说这可以解决大多数人的问题。使用 HTML5 shim 本身也不能解决问题。

但即便如此，如果可能的话，我宁愿不要有来替换 jQuery，在这种情况下，您还需要执行以下操作才能获得完整的解决方案：

为块级 HTML5 元素添加重置样式，以便它们正确地display: block;
在您的 CSS 中也可以使用冒号前缀定位 HTML5 元素。你需要避开这些，它看起来像这样：header, \3A header { /*...*/ }。请注意，转义序列和选择器的其余部分之间有一个空格。
如果您正在使用 jQuery，则需要使用 1.10.x 版本或条件标签在 IE8 中切换到它。

【讨论】：

后来在 Windows XP 上的 ie8 上进行了测试，我可以确认添加 \:section, \:article... { display: block} 是解决我的问题的原因。
为了澄清那些阅读：在样式表中使用\3A header 或\:header 是完全等效的，我更喜欢十六进制代码格式，因为我的预处理器（在这种情况下，LESS）无法解析冒号转义语法。