angularjs - IE 11 无法正确渲染 masonry js

Question

最新更新:

这个问题在新的 masonry 版本中得到了修复。

原帖:

我有一个采用 Bootstrap3 风格的 AngularJS 网站，它在 Chrome、Safari 和 Firefox 中运行良好，但在 IE 中运行不佳(我认为那些日子将会结束)。

我使用Masonry - 显示一些图 block 的插件。我第一次打开页面时，IE11 将图 block 粘在一起。我相信这是因为 Bootstrap 中的填充存在一些问题。当尝试调试应用程序或仅在 console.log 上显示变量内容时，一切正常。此外，重新加载页面后，所有内容都会按预期呈现，实际上仅在第一次访问页面时才会出现。

我注意到 Masonry 的网站和示例可以与 IE 一起使用，所以我试图找出它们有什么不同。

上述问题在 IE10 中也会出现 - 我没有任何有关 IE9 的信息，并且我们不打算支持 IE8 或更早版本。

更新:我注意到 masonry 网站不使用填充(像 bootstrap 那样)而是使用边距，事实上，当我删除填充并添加边距时，它可以工作。然而问题仍然存在 - 为什么它不能与填充一起使用？

更新 2: 我有一个显示错误的工作测试。它相当广泛，可以在这里访问:http://server.grman.at/ie11-intro.html

这表明该问题仅发生在 IE 中，如果在使用之前和之后在页面上预加载了某些脚本(可能是 masonry 库)。

这里是 Chrome 中的屏幕截图:

这是我在 IE11 中的屏幕截图:

最后更新:是的，这是 masonry 脚本，我创建了第二个介绍页面:http://server.grman.at/ie11-intro2.html它不会预加载 masonry 脚本并且它可以工作，现在的问题是 - 为什么？

Answer 1

稍微玩了一下您的演示后，我发现在 Bootstrap 和自定义样式之前加载 masonry.pkgd.min.js 可以解决我的问题。 Masonry 设置中的某些内容破坏了 Internet Explorer 中的重新导航 - 尽管我目前不知 Prop 体细节。

将 masonry script 标记移至文档顶部、Bootstrap 和样式上方，您应该会发现问题已解决。