javascript 由于多种原因，AngularJS 应用程序无法在 IE 8 中正确呈现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18476434/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS app not rendering properly in IE 8 for multiple reasons
提问by Denison Luz
I have been working on a portfolio site called maxmythic.comusing AngularJS and have managed to get it to show up good in everything but IE 8 and 7 (I'm not even bothering with IE 6). I even added all the IE8 AngularJS fixes found http://docs.angularjs.org/guide/ieand http://henriquat.re/appendix/angularjs-and-ie8/necessary-changes-for-ie8-compatibility.htmlI thought those fixes would make it work but its seems like nothing changed.
我一直在使用 AngularJS在名为maxmythic.com的投资组合网站上工作，并设法让它在除 IE 8 和 7 之外的所有内容中都表现良好（我什至不介意 IE 6）。我什至添加了在http://docs.angularjs.org/guide/ie和 http://henriquat.re/appendix/angularjs-and-ie8/necessary-changes-for-ie8-compatibility.html找到的所有 IE8 AngularJS 修复我认为这些修复可以使它工作，但它似乎没有任何改变。
At http://maxmythic.com/and http://maxmythic.com/design, a 3 x 6 grid of 'design tile' divs (with titles and background images) are supposed to display. It gets created by ng-repeatin the Angular view called design.html
在http://maxmythic.com/和http://maxmythic.com/design 上，应该显示一个 3 x 6 网格的“设计图块”div（带有标题和背景图像）。它是ng-repeat在 Angular 视图中创建的，称为design.html
<section ng-controller="MainCtrl" class="main">
<a href="#" ng-repeat="tile in designTiles" ng-href="{{tile.url}}" class="{{tile.bgImageClass}}">
<div ng-mouseenter="blankBar='blueBar'" ng-mouseleave="blankBar = 'blankBar'" class="tile-info">
<div class="blankBar" ng-class="blankBar"></div>
<h3 class="tile_title">{{tile.title}}</h3>
</div>
</a>
</section>
In IE 8, ngRepeat will seem to overwrite each design tile div with the next design tile div in the order they appear in my designTileobject list
在 IE 8 中，ngRepeat 似乎会按照它们出现在我的designTile对象列表中的顺序用下一个设计图块 div 覆盖每个设计图块 div
angular.module('maxmythicApp')
.controller('MainCtrl', function ($scope) {
$scope.designTiles = [
{
url : '/design/vance-and-gary-unhinged',
bgImageClass : 'vance-and-gary-unhinged',
title : 'Vance & Gary Unhinged',
// use : 'Album Art'
},
{
url : '/design/dam-funk',
bgImageClass : 'dam-funk',
title : 'Dam-Funk',
// use : 'Logo'
},
.....
.....
.....
{
url : '/design/various-sketches',
bgImageClass : 'various-sketches',
title : 'Various Sketches',
// use : 'Logo'
},
{
url : '/design/maxmythic-dot-com',
bgImageClass : 'maxmythic-dot-com',
title : 'maxmythic.com',
// use : 'Logo'
},
];
});
As the page is loading, I can see the first one appear but, as soon as it appears, it gets replaced by the next one. Only one design tile div is ever seen at one time and ultimately the last design tile equates to the last object in the the designTilelist which is:
当页面正在加载时，我可以看到第一个出现，但一旦出现，它就会被下一个取代。一次只看到一个设计图块 div，最终最后一个设计图块等同于designTile列表中的最后一个对象，即：
{
url : '/design/maxmythic-dot-com',
bgImageClass : 'maxmythic-dot-com',
title : 'maxmythic.com',
},
If I look into IE's developer tools HTML tab I see what seems to be a messed up out of order DOM and look, you can see all the 18 design tile divs displayed there. It all looks like this
如果我查看 IE 的开发人员工具 HTML 选项卡，我会看到似乎乱七八糟的 DOM 并查看，您可以看到那里显示的所有 18 个设计图块 div。这一切看起来像这样
So none of the design tiles show up there but if I look at the original source it looks totally different. In fact, the <section>element that contains the list of design tile divs does not even appear.
所以没有任何设计图块显示在那里，但如果我查看原始来源，它看起来完全不同。事实上，<section>包含设计磁贴 div 列表的元素甚至不会出现。
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>/\/\/\</title>
<meta name="fragment" content="!">
<meta name="description" content="Max Mythic : Designer & Front-end Developer">
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-retina.png">
<link href="favicon_32x32.ico" rel="icon">
<!--[if IE]><link rel="shortcut icon" href="mm_favicon_32x32.ico"><![endif]-->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="apple-touch-icon-retina.png">
<meta name="viewport" content="width=device-width">
<base href="/">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="styles/aff564d2.main.css">
</head>
<body id="ng-app" ng-app="maxmythicApp">
<div id="page">
<header>
<h1 class="logo">
Max Mythic : Designer, Illustrator & Developer
<a href="/">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 97 27.623"><path d="M97 27.623h-3.73c-3.687 0-6.687-4.524-8.917-13.448C82.29 5.9 79.8 3 78.3 3c-1.481 0-3.943 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.916 13.448s-6.687-4.524-8.918-13.448C52.444 5.9 50 3 48.5 3c-1.482 0-3.944 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.917 13.448s-6.686-4.524-8.916-13.448C22.598 5.9 20.1 3 18.7 3s-3.944 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.917 13.448H0v-3h3.73c1.482 0 3.945-2.927 6.007-11.175C11.968 4.5 15 0 18.7 0 s6.686 4.5 8.9 13.448c2.062 8.2 4.5 11.2 6 11.175c1.482 0 3.945-2.927 6.007-11.175C41.814 4.5 44.8 0 48.5 0 c3.687 0 6.7 4.5 8.9 13.448c2.063 8.2 4.5 11.2 6 11.175c1.481 0 3.943-2.927 6.006-11.175 C71.66 4.5 74.7 0 78.3 0c3.687 0 6.7 4.5 8.9 13.448c2.063 8.2 4.5 11.2 6 11.175H97V27.623z"></svg>
</a>
</h1>
<nav class="pagenav" role="navigation">
<ul>
<li>
<a href="/design">
design
</a>
</li>
<li>
<a href="/about">
about
</a>
</li>
<li>
<a href="/contact">
contact
</a>
</li>
</ul>
</nav>
<!-- <div class="navicon">Nav Icon</div> -->
</header>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="components/es5-shim/es5-shim.js"></script>
<script src="components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- Add your site or application content here -->
<div class="container" ng-view=""></div>
<div id="layout_footer"></div>
</div>
<footer role="footer" id="footer">
<ul>
<li>
<a class="icon" target="_blank" href="https://www.facebook.com/maxmythic">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"><path d="M13.359,14.948H9.168c0,6.7,0,14.949,0,14.949H2.955c0,0,0-8.165,0-14.949H0V9.671h2.955V6.25 c0-2.448,1.162-6.269,6.271-6.269L13.827,0v5.126c0,0-2.798,0-3.34,0c-0.545,0-1.317,0.271-1.317,1.437v3.109h4.736L13.359,14.948z"></svg>
</a>
</li>
<li>
<a class="icon" target="_blank" href="https://twitter.com/maxmythic">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30.246 24.584"><path d="M27.149 6.125c0.015 0.3 0 0.5 0 0.803c0 8.201-6.242 17.656-17.657 17.656c-3.504 0-6.768-1.027-9.513-2.787 c0.484 0.1 1 0.1 1.5 0.086c2.908 0 5.584-0.992 7.707-2.656c-2.715-0.051-5.006-1.846-5.796-4.311 c0.378 0.1 0.8 0.1 1.2 0.109c0.566 0 1.114-0.072 1.635-0.217c-2.84-0.568-4.979-3.08-4.979-6.084 c0-0.025 0-0.053 0.001-0.08C2.05 9.1 3 9.4 4 9.422C2.358 8.3 1.3 6.4 1.3 4.3 c0-1.137 0.306-2.204 0.84-3.12C5.166 4.9 9.7 7.4 14.9 7.619c-0.104-0.453-0.161-0.93-0.161-1.414 C14.734 2.8 17.5 0 20.9 0c1.785 0 3.4 0.8 4.5 1.959c1.414-0.277 2.742-0.795 3.94-1.506 c-0.465 1.449-1.446 2.666-2.729 3.433c1.258-0.149 2.453-0.483 3.565-0.977C29.417 4.2 28.4 5.2 27.1 6.125z"></svg>
</a>
</li>
<li>
<a class="icon" target="_blank" href="https://plus.google.com/113556551990494099731">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 28.939 29.768"><path d="M15.263 16.994l-1.396-1.084c-0.426-0.354-1.007-0.818-1.007-1.67c0-0.855 0.581-1.399 1.086-1.903 c1.626-1.28 3.251-2.642 3.251-5.513c0-2.952-1.856-4.504-2.748-5.241h2.4L19.368 0h-7.633c-2.094 0-5.111 0.496-7.32 2.3 c-1.666 1.437-2.479 3.418-2.479 5.2c0 3 2.3 6.1 6.4 6.098c0.389 0 0.813-0.038 1.238-0.078 c-0.191 0.466-0.386 0.854-0.386 1.515c0 1.2 0.6 1.9 1.2 2.637c-1.744 0.121-5 0.314-7.4 1.8 C0.694 20.8 0 22.8 0 24.215c0 2.9 2.7 5.6 8.3 5.553c6.662 0 10.189-3.688 10.189-7.336 C18.517 19.8 17 18.4 15.3 16.994z M10.188 12.529c-3.333 0-4.843-4.31-4.843-6.908c0-1.012 0.19-2.058 0.851-2.874 C6.818 2 7.9 1.5 8.9 1.465c3.214 0 4.9 4.3 4.9 7.143c0 0.7-0.077 1.939-0.969 2.8 C12.198 12.1 11.2 12.5 10.2 12.529z M10.227 28.14c-4.145 0-6.817-1.981-6.817-4.74c0-2.756 2.479-3.688 3.331-3.995 c1.626-0.548 3.72-0.623 4.067-0.623c0.388 0 0.6 0 0.9 0.039c2.946 2.1 4.2 3.1 4.2 5.1 C15.923 26.3 13.9 28.1 10.2 28.14z"><polygon points="25,12.5 25,8.6 23.1,8.6 23.1,12.5 19.3,12.5 19.3,14.4 23.1,14.4 23.1,18.3 25,18.3 25,14.4 28.9,14.4 28.9,12.5"></svg>
</a>
</li>
<li class="madeby">
<p>Made by</p>
<svg class="maxmythic" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 97 27.623"><style>.style0{fill:#666666;}</style><path d="M97 27.623h-3.73c-3.687 0-6.687-4.524-8.917-13.448C82.29 5.9 79.8 3 78.3 3c-1.481 0-3.943 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.916 13.448s-6.687-4.524-8.918-13.448C52.444 5.9 50 3 48.5 3c-1.482 0-3.944 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.917 13.448s-6.686-4.524-8.916-13.448C22.598 5.9 20.1 3 18.7 3s-3.944 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.917 13.448H0v-3h3.73c1.482 0 3.945-2.927 6.007-11.175C11.968 4.5 15 0 18.7 0 s6.686 4.5 8.9 13.448c2.062 8.2 4.5 11.2 6 11.175c1.482 0 3.945-2.927 6.007-11.175C41.814 4.5 44.8 0 48.5 0 c3.687 0 6.7 4.5 8.9 13.448c2.063 8.2 4.5 11.2 6 11.175c1.481 0 3.943-2.927 6.006-11.175 C71.66 4.5 74.7 0 78.3 0c3.687 0 6.7 4.5 8.9 13.448c2.063 8.2 4.5 11.2 6 11.175H97V27.623z" class="style0"></svg>
</li>
</ul>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="scripts/cdf6190d.scripts.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-37437533-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Additionally, IE 8 throws the following error
此外，IE 8 会引发以下错误
TypeError: Unable to get value of the property 'childNodes': object is null or undefinedundefined
Another funny thing is that if I enter http://maxmythic.cominto the address bar, IE8 will add a #(hashtag) turning that original URL into http://maxmythic.com/#/. This screws up the pretty URL structure I had going with HTML5 mode.
另一个有趣的事情是，如果我进入http://maxmythic.com地址栏，IE8 会添加一个#（hashtag）将原来的 URL 变成http://maxmythic.com/#/. 这搞砸了我在 HTML5 模式下使用的漂亮 URL 结构。
On top of all of that 98% of my CSS is not being applied to the html. Maybe that is a separate question all together but I thought I'd mention it just in case anyone had run into all of these issues before and had a solution.
最重要的是，我 98% 的 CSS 没有应用于 html。也许这是一个单独的问题，但我想我会提到它，以防万一有人之前遇到过所有这些问题并有解决方案。
All of the site's files can be viewed at my gh-pages repo here https://github.com/siddhion/maxmythic/tree/gh-pages
该网站的所有文件都可以在我的 gh-pages 仓库中查看 https://github.com/siddhion/maxmythic/tree/gh-pages
Any ideas on what is going on here and how to solve it?
关于这里发生了什么以及如何解决它的任何想法？
回答by Denison Luz
I am working on a AngularJs project at the moment and we also need to give support to IE8.
我目前正在做一个 AngularJs 项目，我们还需要支持 IE8。
Everything is working fine as expected.
一切都按预期工作正常。
I took a look at your code and I can see you have included few things to make AngularJs work with IE 8.
我查看了您的代码，我可以看到您包含了一些使 AngularJs 与 IE 8 一起工作的内容。
But at the same time I think you missed some bits, so it's worthwhile take a look again at this page - AngularJs IE
但同时我认为你错过了一些东西，所以值得再看看这个页面 - AngularJs IE
As we are dealing with a really unreliablebrowser as IE 8, I would strongly suggest you to follow the instructions on the page word by word.
由于我们正在处理像 IE 8 这样非常不可靠的浏览器，我强烈建议您逐字按照页面上的说明进行操作。
For example: I didn't find this line on your code above
<html xmlns:ng="http://angularjs.org">
例如：我在上面的代码中没有找到这一行
<html xmlns:ng="http://angularjs.org">
You also wrote this line
<body id="ng-app" ng-app="maxmythicApp">
你也写了这一行
<body id="ng-app" ng-app="maxmythicApp">
BUT the official page suggests this format:
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
但官方页面建议采用这种格式：
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
And you put the ng-appinside the <body>tag instead of the <html>.
并且您将ng-app放在<body>标签中而不是<html>.
These details might not make a big difference for modern (and decent) browsers, but we are talking about IE 8so every little details does matter - ('play by the book').
这些细节可能不会对现代（和体面的）浏览器产生太大影响，但我们谈论的是IE 8，所以每一个小细节都很重要 - （“按原样玩”）。
About the hash(#), that's a normal behaviour of AngularJs. AngularJS offers two configuration modes to control the format of the URL: Hashbang mode(the default) and the HTML5 modewhich is based on using the HTML5 History API.
关于 hash(#)，这是 AngularJs 的正常行为。AngularJS 提供了两种配置模式来控制 URL 的格式：Hashbang 模式（默认）和基于使用 HTML5 History API的HTML5 模式。
IE8 clearly doesn't support HTML 5 history API so the Hashbang mode is used instead.
IE8 显然不支持 HTML 5 历史 API，因此使用 Hashbang 模式。
You can read about all of this here.
您可以在此处阅读所有这些内容。
Hope that helps.
希望有帮助。
回答by Eamonn Gahan
I would also like to add that the /# being added to your URLs will happen in IE8 as IE8 does not support HTML5 pushState APIs and so it uses a fallback hash fragment mechanism.
我还想补充一点，添加到您的 URL 的 /# 将发生在 IE8 中，因为 IE8 不支持 HTML5 pushState API，因此它使用回退哈希片段机制。
回答by facebook-100004107270444
i solve the problem, i clear all DOM's class and id, just clear all jquery event listener .maybe some jquery function execute before angular script was rendered. therefore ng-repeat can't work fine.
我解决了这个问题，我清除了所有 DOM 的类和 id，只是清除了所有 jquery 事件侦听器。也许在呈现 angular 脚本之前执行了一些 jquery 函数。因此 ng-repeat 不能正常工作。
回答by Scottux
Try removing the trailing comma in your $scope.designTiles array.
尝试删除 $scope.designTiles 数组中的尾随逗号。
IE8 will always use the hashtag in html5 mode, as others have stated.
正如其他人所说，IE8 将始终在 html5 模式下使用主题标签。
