根据浏览器在 Angular 4 组件中加载不同的 CSS 规则

Question

我有一个 Angular 4 应用程序，它看起来完全不同，具体取决于您使用的浏览器。这是它在 Firefox 58 上的外观示例（这是我希望它的外观）：

这是它在 Chrome 63 上的外观示例：

几天前我打开了一个问题，看看我是否可以解决这个问题（Chrome 和 Firefox 中的不同“div”高度），但我找不到让它在两种浏览器上都能工作的方法。

因此，我正在考虑根据使用 Chrome 或 Firefox 的用户加载不同的 CSS 类。Angular 4+ 有办法找出浏览器吗？然后我要做的是ngClass在组件的模板中加载适当的类，希望可以解决这个问题。

或者有更好的选择吗？

提前致谢，

Answer 1

做了更多的研究，我在这篇文章中找到了解决方案：

https://www.codeproject.com/Tips/1167666/How-to-Apply-CSS-HACKS-for-Different-Browsers-Chro

就我而言，这是我使用的解决方案：

/* Style only for Google Chrome/Opera */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  td {
    height: 1px;
    vertical-align: top;
  }
}

/* Style only for Mozilla Firefox */
@-moz-document url-prefix() {
  td {
    height: 100%;
    vertical-align: top;
  }
}

/* Style only for Internet Explorer */ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  td {
    height: 100%;
    vertical-align: top;
  }
}

感谢所有的建议！

Answer 2

根据OP的问题，是的，您可以使用 来检测浏览器（用户代理）类型window.navigator.userAgent。在mozilla了解更多信息

一个粗略的函数可能如下所示：

getBrowser() {
  if (window.navigator.userAgent.indexOf('Mozzila') != -1) {
      this.firefox = true;
  else {
      this.firefox = false;
  }
}

这将返回浏览器规范。把这个函数放在一个服务中，你就可以在ngOnInitAngular 的钩子过程中调用它。然后，您可以通过将其添加到 DOM 来动态添加您创建的 css 样式表

<link *ngIf="!firefox" rel="stylesheet" href="path/to/css">

或者，您可以创建样式标签并将其动态附加到 DOM。

您可以将它用于 css 样式表中的单个样式，如下所示：

<div class="title" [class.chrome]="!firefox">

这听起来真是个糟糕的主意

@powerbuoy 是对的，这是一个坏主意。不是功能，而是你想如何将其付诸实践。这不是一种可扩展性很强的方法，并且无法在许多浏览器上运行。其他（更好的）CSS 解决方案包括使用flexbox或bootstrap