css - Angular2 - 为什么不会 :host grow vertically with its content in Safari?

Question

我正在使用 Angular2 开发一个网站。在我所有组件的 CSS 中，我使用了 :host 选择器。那里的 css 很简短，每个组件都或多或少相同:

:host 
{
  position:relative;
  top:60px;
  background-color:black;
  width:100%;
}

我的大部分组件都是动态填充从数据库中检索的数据，因此宿主元素应该随着动态放置在其中的内容而增长。这在 Chrome 和 Firefox 中都按预期工作，但在 Safari 中不起作用。在 Safari 中，数据被正确加载，但 :host 没有增长，因此，当您向下滚动页面时，黑色背景颜色只是在某个点被切断。我应该提一下，我使用的 Safari 版本是 9，这肯定已经过时了，所以据我所知，这在更新的版本中甚至可能不是问题，但这仍然必须在旧版本中工作才能向后兼容.另外，我还没有在 IE 或 Edge 中测试过，所以我不确定这是否是一个问题。

所以我只是想知道为什么 :host 的内容在(至少是这个旧版本的)Safari 中没有增长，是否有办法修复它？而且我知道我可以在我的每个组件中使用一个包装器类，将背景颜色放在那里而不是 :host，这样就可以了(我试过了)，这就是我要做的如果必须这样做，但我只是想先在这里询问一下，看看是否有人知道我为什么会遇到这个问题，以及是否有一种方法可以在不求助于包装器的情况下解决它 div/类。

Answer 1

Angular 宿主元素默认显示内联。尝试更改宿主元素的默认显示:

:host {
  display: block; // or any other value.
}

内联元素忽略任何高度或宽度值。

参见 this更多解释。