angular 组件元素在 ie11 中并不总是可设置样式

Question

当我创建组件 ng g c my-component 时，一旦我打开 polyfill，内容就可以在 ie11 中正常呈现。然而，该组件打破了 CSS，拒绝设置样式——特别是，它拒绝采用任何高度，无论内容如何。调试，起初我以为它拒绝背景颜色（我用它来识别 ie 中的块，因为没有悬停时突出显示），但是当我添加一个明确的高度时，背景颜色突然呈现。

示例（在 app-my-component 内）：

<article class="my routable component">
  <app-child-component></app-child-component>
  <footer>should be under the inner component content</footer>
</article>

在应用程序子组件内：

<!-- this section will never have a height -->
<section class="child component">
  <app-inner-component></app-inner-component>
</section>

在应用内部组件内：

<!-- this section naturally will have height after the async returns results -->
<section class="inner component">
  <div *ngFor="const item in asyncResultItems">hi mom!</div>
</section>

页脚文本将呈现在应用程序内部组件内容之上。我更喜欢后面的页脚文本——基本上，IE11 应该像 divs 一样对待 app-* 元素，但它似乎在给出高度时拒绝计算它们（样式 inside 不过工作得很好。

对此可以做些什么（简单地将组件包装在包含 div 中的组件本身也不起作用）？

完整示例：https://stackblitz.com/edit/angular-fhmded

注意，感谢惊人的帮助，我已经诊断出问题（我在最小示例和我的实际代码之间添加了越来越多的差异，直到我重现它）。 Flex 列 在子组件上中断。

Answer 1

IE11 没有正确支持 flexbox。正如您在 https://caniuse.com/#feat=flexbox 上看到的那样，存在许多已知问题。它对语法也非常敏感。如果我将您的 flex: 1 规则更改为 flex: 1 1 auto 那么它似乎至少对我来说是正确的。

angular 组件元素在 ie11 中并不总是可设置样式

angular component elements not always stylable in ie11

css

internet-explorer-11

angular