Question

我有一个Angular 4应用程序，根据您使用的浏览器，它看起来完全不同。这是它在Firefox 58上的外观示例（以及我希望它看起来的方式）：

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

我几天前打开了一个问题，看看我是否可以解决这个问题（Different 'div' heights in Chrome and Firefox），但我找不到办法让它适用于这两种浏览器。

所以，我考虑根据使用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;
  }
}

这将返回浏览器规范。将此功能放入服务中，您可以在角度ngOnInit挂钩期间调用它。然后，您可以通过将创建的css样式表添加到DOM

来动态添加它

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

或者，您可以创建样式标记并将其随意附加到DOM。

你可以在css样式表中使用它作为单一样式，如下所示：

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

听起来真是个坏主意

@powerbuoy是对的，这是一个坏主意。不是功能，而是你想如何实践。这不是一个非常可扩展的方法，并不适用于许多浏览器。其他（更好）的css解决方案包括使用flexbox或bootstrap

Answer 3

不建议每个用户代理使用不同的样式表，而是检查浏览器是否支持样式。您可以使用written a quick run through on querying and writing data to a PostgreSQL database检查浏览器是否支持某种样式。

由于您还没有上传任何代码，我可以不要告诉你如何在你的情况下实现它。

Answer 4

不建议每个用户代理使用不同的样式表。（也许旧版本的firefox不支持某些样式或chrome支持它）。

建议检查浏览器是否支持某种样式。您可以检查浏览器是否支持@supports at-rule.

的某个stlye

Answer 5

您可以拥有样式的主文件，例如styles.scss。而且，如果您想要其他浏览器的样式，例如Internet Explorer 10-11，那么：

创建新样式表，例如InternetExplorer.scss
然后将该样式表导入主样式表文件styles.scss：
```
@import "scss/InternetExplorer.scss";
```

然后在InternetExplorer.scss中为Internet Explorer 10-11写条件

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .nav-tabs .nav-item {
        margin-bottom: -1px;
        z-index: 0;
    }
}

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

5 个答案: